google map two markers on one map - php

Hey. I'mm trying to put two points on a single map with same div id..
but it doesn't work..
code:
for 1st,
var map = new GMap2(document.getElementById("map-canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(<?=$lat;?>,<?=$lng;?>), 6);
var point = new GLatLng(<?=$lat;?>,<?=$lng;?>);
var marker = createMarker(point,'Welcome:<b></b><br>Second Info Window with an image<br><img src="http://localhost/gps/user_photo/" width=80 height=80>')
map.addOverlay(marker);
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
for 2nd,
var map = new GMap2(document.getElementById("map-canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(<?=$mylat;?>,<?=$mylng;?>), 6);
var point1 = new GLatLng(<?=$mylat;?>,<?=$mylng;?>);
var marker = createMarker1(point1,'Welcome:<b></b><br>Second Info Window with an image<br><img src="http://localhost/gps/user_photo/" width=80 height=80>')
map.addOverlay(marker);
function createMarker1(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
why two points not shown in one map?????
and it will seen in two different maps...

//set up map as before
var point0 = new GLatLng(<?=$mylat0;?>,<?=$mylng0;?>);
var point1 = new GLatLng(<?=$mylat1;?>,<?=$mylng1;?>);
var marker0 = createMarker(point0,'Welcome:<b></b><br>First Info Window etc);
var marker1 = createMarker(point1,'Welcome:<b></b><br>Second Info Window etc);
map.addOverlay(marker);
// only declare this once
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
This is one way of doing it just to get it working for you, but essentially the js points and markers should be arrays which you loop through - ditto probably the $mylat and $mylong vars in PHP.

As i understood - you want to add two points on one map, on the one page.
If so - you don't need to initialize Gmap twice, just do something like this:
http://pastebin.com/BtvdfaiP

Related

Marker Cluster for data from MYSQL DB - Google Maps API

I have tried implementing a marker cluster into my code from the Google Developers Documentation but no joy so far. https://developers.google.com/maps/documentation/javascript/marker-clustering
Here is the snippet of code from my .JS file paying attention to the function showAllCustomers(allData) where I want to implement the Marker Clusterer:
var map;
var geocoder;
//Code to load the map with center point of Monterey MA
function initMap() {
var monterey = {lat: 42.181613, lng: -73.215013};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: monterey,
mapTypeId: google.maps.MapTypeId.HYBRID,
labels: true,
});
//collect customer data and geocoder object - declare geocoder as global
var cusdata = JSON.parse(document.getElementById('data').innerHTML);
geocoder = new google.maps.Geocoder();
codeAddress(cusdata);
var allData = JSON.parse(document.getElementById('allData').innerHTML);
showAllCustomers(allData)
var searchData = JSON.parse(document.getElementById('searchData').innerHTML);
showSearchedCustomer(searchData)
}
function showAllCustomers(allData) {
//declare info window variable outside of loop to allow to clear when selecting other markers
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = [data.lastName + ' ' + data.physicalAddress];
content.appendChild(strong);
//add image to infowindow - you are also able to add image path to mysql and then append dynamically
var img = document.createElement('img');
img.src = 'images/santahat.png';
img.style.width = '50px';
content.appendChild(img);
//Create markers for customer locations and customize
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.latitude, data.longitude),
map: map,
icon: iconBase + 'homegardenbusiness.png'
});
// Add event listener to open info window and show customer name
marker.addListener('mouseover', function(){
infoWind.setContent(content);
infoWind.open(map, marker);
//add event listener to zoom in to clicked customer
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
map.setZoom(20);
});
});
})
}
Here is my attempt to add the MarkerClusterer (code same as previous up to this point):
//Create markers for customer locations and customize
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.latitude, data.longitude),
map: map,
icon: iconBase + 'homegardenbusiness.png'
});
//create marker clusterer to group data
var markerCluster = new MarkerClusterer(map, [], {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
// Add event listener to open info window and show customer name
marker.addListener('mouseover', function(){
infoWind.setContent(content);
infoWind.open(map, marker);
//add event listener to zoom in to clicked customer
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
map.setZoom(20);
});
});
markerCluster.addMarker(marker);
})
}
Functioning JS file:
var map;
var geocoder;
//Code to load the map with center point of Monterey MA
function initMap() {
var monterey = {lat: 42.181613, lng: -73.215013};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: monterey,
mapTypeId: google.maps.MapTypeId.HYBRID,
labels: true,
});
//collect customer data and geocoder object - declare geocoder as global
var cusdata = JSON.parse(document.getElementById('data').innerHTML);
geocoder = new google.maps.Geocoder();
codeAddress(cusdata);
var allData = JSON.parse(document.getElementById('allData').innerHTML);
showAllCustomers(allData);
var searchData = JSON.parse(document.getElementById('searchData').innerHTML);
showSearchedCustomer(searchData)
}
function showAllCustomers(allData) {
//declare info window variable outside of loop to allow to clear when selecting other markers
var infoWind = new google.maps.InfoWindow;
//Create marker clusterer to group data
var markerCluster = new MarkerClusterer(map, [], {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
Array.prototype.forEach.call(allData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = [data.lastName + ' ' + data.physicalAddress];
content.appendChild(strong);
//add image to infowindow - you are also able to add image path to mysql and then append dynamically
var img = document.createElement('img');
img.src = 'images/santahat.png';
img.style.width = '50px';
content.appendChild(img);
//Create markers for customer locations and customize
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.latitude, data.longitude),
map: map,
icon: iconBase + 'homegardenbusiness.png'
});
markerCluster.addMarker(marker);
// Add event listener to open info window and show customer name
marker.addListener('mouseover', function(){
infoWind.setContent(content);
infoWind.open(map, marker);
//add event listener to zoom in to clicked customer
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
map.setZoom(20);
});
});
})
}
//google maps geocoding code for address to collect lat lng from customer addresses
function codeAddress(cusdata) {
Array.prototype.forEach.call(cusdata, function(data){
var address = data.lastName + ' ' + data.physicalAddress;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
//create object that collects the lat and lng data and pass function to update customers lat lng
var points = {};
points.id = data.id;
points.latitude = map.getCenter().lat();
points.longitude = map.getCenter().lng();
updateCustomersWithLatLng(points);
//add code to check the result status from geocode request and if we get an OVER_QUERY_LIMIT error we try again after slight delay // Jay 20201208-1015
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function() {
codeAddress(cusdata);
}, 100);
} // else {
// alert("Geocode was not successful for the following reason:"
// + status);
// }
});
});
}
//create update customers function that updates db using ajax call
function updateCustomersWithLatLng(points) {
$.ajax({
url:"action.php",
method:"post",
data: points,
success: function(res) {
console.log(res)
}
})
}
//When search customers is clicked create function to zoom in to the searched customer
function showSearchedCustomer(searchData) {
// var searchedCus = { ? };
// map = new google.maps.Map(document.getElementById("map"), {
// zoom: 20,
// center: searchedCus,
// });
//declare info window vairable outside of loop to allow to clear if selecting other markers
var infoWind = new google.maps.InfoWindow;
Array.prototype.forEach.call(searchData, function(data){
var content = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = [data.lastName + ' ' + data.physicalAddress];
content.appendChild(strong);
//add image to infowindow - you are also able to add image path to mysql and then append dynamically
var img = document.createElement('img');
img.src = 'images/santahat.png';
img.style.width = '50px';
content.appendChild(img);
//Create marker for searched customer location and customize
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.latitude, data.longitude),
map: map,
icon: iconBase + 'homegardenbusiness.png'
});
// Add event listner to open info window and show customer name
marker.addListener('mouseover', function(){
infoWind.setContent(content);
infoWind.open(map, marker);
});
});
}

Google Map contain location function with foreach and mysql

I am using google map api with contain location function .... i am retrieving latitude longitude from database i am using foreach loop to get result.If marker is within polygon it will stop foreach but problem it is not showing any result. Result come out is from last row query how can i fix it.It is showing me only last row from database .Below is my code
<?php
if(!empty($zone)){
foreach($zone as $findzone)
{
$exploded_data=explode('),',$findzone['zone_latlog']);
$count=count($exploded_data);
?>
<script>
var latitude = document.getElementById('latitude').value;
var longitude = document.getElementById('longitude').value;
var map;
var coord1 = new google.maps.LatLng(latitude, longitude);
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(33.714760, 73.083160),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bermudaTriangle = new google.maps.Polygon({
map: map,
paths: [
<?php
for($i=0;$i<$count;$i++){
echo "new google.maps.LatLng".$exploded_data[$i]."),";
}
?>
]
});
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<bermudaTriangle.getPath().getLength(); i++) {
bounds.extend(bermudaTriangle.getPath().getAt(i));
}
bounds.extend(coord1);
var marker1 = new google.maps.Marker({
map: map,
position: coord1
});
map.setCenter(bounds.getCenter());
map.setZoom(11);
checkInPolygon(marker1, bermudaTriangle);
}
google.maps.event.addDomListener(window, "load", initialize);
function checkInPolygon(marker, polygon) {
var infowindow = new google.maps.InfoWindow();
var html = "";
if (google.maps.geometry.poly.containsLocation(marker.getPosition(), polygon)) {
html = "inside polygon";
} else {
html = "outside polygon";
}
infowindow.setContent(html);
infowindow.open(map, marker);
}
</script>
<?php
}}?>
How to fix that problem that show me only only that polygon that has my latitude longitude marker

Removing marker by latitude/longitude in google maps

I have set of markers in my google map. And at the right side of my map I have list of places marked in the map. Now upon clicking the places the color of the pin/marker should be changed. For this I thought I would delete the marker with latitude and longitude(which I will get on clicking the places link) and place a new marker with new image. But I dont know how to delete a marker with latitude and longitude or by place. Please help.
<script type='text/javascript'>
$(document).ready(function() {
var map = null;
var infowindow = new google.maps.InfoWindow();
function createMarker(place) {
var marker = new google.maps.Marker({
map: map
});
var address = place.formatted_address;
marker.setPosition(place.geometry.location);
marker.setTitle(address);
marker.setVisible(true);
address = address + 'B <a class="link" href="#" title="Want to go" alt="' + address + '">W</a> <a class="link" href="#" alt="' + address + '" title="Favourite">F</a>';
$('#trip_location').append(address);
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent('<div><strong>' + marker.title + '</strong><br>');
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, 'click');
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = /** #type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
var location = place.geometry.location;
var address = place.formatted_address;
createMarker(place);
});
}
$('#trip_location').on('click', '.link', function(e) {
e.preventDefault();
var location = $(this).attr('alt');
});
$('.clear').click(function() {
$('#searchTextField').val('');
});
google.maps.event.addDomListener(window, 'load', initialize);
});
I will be adding multiple markers to google map through google's autocomplete. And the places of the markers will be listed on the right side of the page. When the user clicks the places, it should replace the marker icon.
Instead of deleting and replacing, you could keep a reference to each marker that is associated with a place and just call setIcon on it passing the new setting. See documentation: https://developers.google.com/maps/documentation/javascript/reference#Marker
EDIT: New code in question.
Added markers array to contain the markers, used data attribute to hold marker id, pull markerid attribute value when link element click event is fired.
NOTE: Not tested, so it may be buggy.
$(document).ready(function() {
var map = null;
var markers = [];
var infowindow = new google.maps.InfoWindow();
function createMarker(place) {
var marker = new google.maps.Marker({
map: map
});
var address = place.formatted_address;
marker.setPosition(place.geometry.location);
marker.setTitle(address);
marker.setVisible(true);
markers.push(marker);
address = address + 'W <a class="link" href="#" alt="' + address + '" title="Favourite" data-markerid='" + (markers.length - 1) + "'>F</a>';
$('#trip_location').append(address);
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.setContent('<div><strong>' + marker.title + '</strong><br>');
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, 'click');
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = /** #type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
var location = place.geometry.location;
var address = place.formatted_address;
createMarker(place);
});
}
$('#trip_location').on('click', '.link', function(e) {
e.preventDefault();
var location = $(this).attr('alt');
var markerid = $(this).data('markerid');
var marker = markers[markerid];
});
$('.clear').click(function() {
$('#searchTextField').val('');
});
google.maps.event.addDomListener(window, 'load', initialize);
});

How to embed a google map with a changeable area?

I haven't worded this very well
But basically, I'd like to embed a map on my site - but the area it shows will change. I've tried doing this, but it never seems to work as it will focus on the wrong area - the old area, rather than the new area.
Basically, I'd like a google map code that uses $place as a location.
Thanks.
// Prepare your coordinates
var latlng1 = new google.maps.LatLng(0.0, 0.0);
var latlng2 = new google.maps.LatLng(100.0, 100.0);
// Initialize your map
var map = new google.maps.Map(document.getElementById('map'), options);
var options = {
zoom: 6,
center: latlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Recenter the map/viewport
map.setCenter(latlng2);
If you don't have the location geocoded, you can look up by address like so: (assume you include your api key above this call - add in the lang vars to output value, in 2 places)
<script type="text/javascript">
$(document).ready(function() {
document.onunload = "GUnload()";
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(0.0, 0.0), 13);
// map.setUIToDefault();
geocoder = new GClientGeocoder();
if (geocoder) {
geocoder.getLatLng( '$place', function(point) {
if (!point) {
} else {
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));var bottomRight = new GControlPosition (G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
var mapTypeControl = new GMapTypeControl(); map.addControl(mapTypeControl, topRight);
map.addControl(new GSmallMapControl()); var bounds = map.getBounds();
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml('Get Directions ยป' );})
;}
}
);
}
// end geocoding
}
});
</script>

google map dynamically put mark on map for my listbox (city, town) selection

I'm working on a property portal. I need to do implementation with gMap :/
I have a dynamic listbox and I need google map to dynamically put mark on map for my city and town selection...
appreciate helps!! thanks
alt text http://img.skitch.com/20090821-txmaw93yjt5ua197t41f6k1e3u.jpg
If you have just city name or address, Use the following function:
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
Or else if you have all the values as required below use the following code:
var json_loc = { "locationName": "xxxx", "locationAddress": "xxxx", "latitude": xxxx, "longitude": xxxx };
If you have the above values you can use the following functions to have google maps.
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(json_loc.latitude, json_loc.longitude);
var locationName = json_loc.locationName;
var locationAddress = json_loc.locationAddress;
map.setCenter(point, 14);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(locationView.createMarker(point, locationName, locationAddress));
// Creates a marker whose info window displays the letter corresponding
// to the given index.
createMarker: function(point, locationName, locationAddress) {
var marker = new GMarker(point);
GEvent.addListener(marker, "mouseover", function() {
marker.openInfoWindowHtml("<b>" + locationName + "</b><br>" + locationAddress);
});
return marker;
}
I would recommend using this extension (JS library):
http://www.pixeldevelopment.com/pdmarker.asp
for coordinates, you would need to do geocoder via google API to fetch the correct coordinates for the city desired.
This is the simplest way to add a marker to a map.
var point = new GLatLng(40,10);
var marker = new GMarker(point);
map.addOverlay(marker);

Categories