converting coordinates to address v3 google api - google-maps

I am not able to convert my coordinates to address ...
Almost got adjusting function below ... but how many markers are, just creating only the last marker ...:
My function to create markers:
function createMarker(point,info,map) {
var iconURL = 'img/pata.png';
var iconSize = new google.maps.Size(32,34);
var iconOrigin = new google.maps.Point(0,0);
var iconAnchor = new google.maps.Point(15,30);
var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
var marker = new google.maps.Marker({
position : point,
html : info,
map : map,
icon: myIcon
});
var infowindow = new google.maps.InfoWindow({
content: "Dispositivo: " + info + "<br> Endereço: " + point
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
}
My function to create bookmarks:
Function that was trying to adapt (just wanted to send the coordinates and he convert to address and leave the infowindow when clicking)
function codeLatLng() {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}

could,
but do not know how to get the addresses separately to list ...
but got the click infowindow:
function createMarkerAtual(point,info,dt,map) {
var iconURL = 'img/dog2.png';
var iconSize = new google.maps.Size(45,45);
var iconOrigin = new google.maps.Point(0,0);
var iconAnchor = new google.maps.Point(15,30);
var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);
var marker = new google.maps.Marker({
position : point,
html : info,
map : map,
icon: myIcon
});
google.maps.event.addListener(marker, 'click', function() {
endereco(info,this.position);
infowindow.open(map,this);
});
}
function endereco(info,point){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': point}, function(results, status){
if (status == google.maps.GeocoderStatus.OK){
infowindow.setContent('<b>Coordenadas: </b>' + point + '<br><b>Dispositivo:</b> ' + info + '<br><b>Endereço: </b>' + results[0].formatted_address);
} else {
}
});
}

Related

Google API to map nearby properties in Salesforce

I asked this question originally in the Salesforce StackExchange, but was redirected here, since it's more of a Google API question than a Salesforce question.
Right now I have the following code, which creates a marker at the location of the property on a visualforce page that has an embedded Google Map. When the user clicks on the marker, an info window appears with information on the property.
<apex:page standardController="Property__c">
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
scrollwheel: false
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = "{!Property__c.Property_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.State__c} " + "{!Property__c.Zip_Postal_Code__c}}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Property__c.Name}</b><br>{!Property__c.Property_Address__c}<br>{!Property__c.City__c}, {!Property__c.State__c} {!Property__c.Zip_Postal_Code__c}"
});
geocoder.geocode({
address: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
map.setTilt(45);
//center map
map.setCenter(results[0].geometry.location);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Property__c.Name}"
});
//add listeners
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});
}
} else {
$('#map').css({
'height': '15px'
});
$('#map').html("Oops! {!Property__c.Name}'s billing address could not be found, please make sure the address is correct.");
resizeIframe();
}
});
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
});
</script>
<style>
#map {
font-family: Arial;
font-size: 12px;
line-height: normal !important;
height: 800px;
background: transparent;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</apex:page>
This is working just fine. But I am trying to modify it to also show properties nearby to this property. I have gotten as far as using an SOQL query to find these properties, pass their addresses into an array, geocode these addresses and set a marker at each geocoordinate. All of that works just swell.
Where I've been stuck, is in displaying the infowindow that appears when the user clicks one of these markers. Not only can I not create an infowindow for the NEW markers, but the infowindow for the OLD "main" marker is breaking as well. In fact, even if I comment the infowindow and listener events for the new markers, the original is still broken. These infowindows need to display different information than the infowindow for the "main" marker. Here is my modified code:
$(document).ready(function() {
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
scrollwheel: false
}
var map;
var marker;
var marker2;
var geocoder = new google.maps.Geocoder();
var address = "{!Property__c.Property_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.State__c} " + "{!Property__c.Zip_Postal_Code__c}}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Property__c.Name}</b><br>{!Property__c.Property_Address__c}<br>{!Property__c.City__c}, {!Property__c.State__c} {!Property__c.Zip_Postal_Code__c}"
});
geocoder.geocode({
address: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
map.setTilt(45);
//center map
map.setCenter(results[0].geometry.location);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Property__c.Name}"
});
//add listeners
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});
//several markers
//Get Geos
var geos = [];
var idy = 0; <
apex: repeat value = "{!getgeoList}"
var = "m" >
geos[idy++] = "{!m}"; <
/apex:repeat>
for (var i = 0; i < geos.length; ++i) {
console.log('geo' + geos[i] + 'out of' + geos.length);
geocodeAddress(geos[i]);
}
function geocodeAddress(location) {
geocoder.geocode({
'address': location
}, function(results, status) {
// alert(status);
if (status == google.maps.GeocoderStatus.OK) {
// alert(results[0].geometry.location+location);
createMarker(results[0].geometry.location, location);
} else {
alert("some problem in geocode" + status);
}
});
}
function createMarker(latlng, html) {
marker2 = new google.maps.Marker({
position: latlng,
map: map
});
addIinfo(marker2, html);
}
function addInfo(marker2, html) {
var infowindow2 = new google.maps.InfoWindow({
content: html
});
marker2.addListener(marker2, 'click', function() {
infowindow2.open(marker2.get('map'), marker2);
});
}
}
} else {
$('#map').css({
'height': '15px'
});
$('#map').html("Oops! {!Property__c.Name}'s billing address could not be found, please make sure the address is correct.");
resizeIframe();
}
});
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
});
I changed marker2.addListener to google.maps.event.addListener. This worked, except that my original marker was showing the same information as the marker2 markers. When I changed the marker2 icon to blue, I realized that this was because it was putting a marker2 marker over the original marker. So I changed i = 0 to i=1 in my for loop, and now my code works just great! :)
Here is my new code:
$(document).ready(function() {
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
scrollwheel: false
}
var map;
var marker;
var marker2;
var geocoder = new google.maps.Geocoder();
var address = "{!Property__c.Property_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.State__c} " + "{!Property__c.Zip_Postal_Code__c}}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Property__c.Name}</b><br>{!Property__c.Property_Address__c}<br>{!Property__c.City__c}, {!Property__c.State__c} {!Property__c.Zip_Postal_Code__c}"
});
geocoder.geocode({
address: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
map.setTilt(45);
//center map
map.setCenter(results[0].geometry.location);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Property__c.Name}"
});
//add listeners
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});
//several markers
//Get Geos
var geos = [];
var idy=0;
<apex:repeat value="{!getgeoList}" var="m">
geos[idy++]="{!m}";
</apex:repeat>
for (var i = 1; i < geos.length; ++i) {
console.log('geo' + geos[i] + 'out of' + geos.length);
geocodeAddress(geos[i]);
}
function geocodeAddress(location) {
geocoder.geocode({
'address': location
}, function(results, status) {
// alert(status);
if (status == google.maps.GeocoderStatus.OK) {
// alert(results[0].geometry.location+location);
createMarker(results[0].geometry.location, location);
} else {
alert("some problem in geocode" + status);
}
});
}
function createMarker(latlng, html) {
marker2 = new google.maps.Marker({
position: latlng,
map: map,
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
addInfo(marker2,html);
}
function addInfo(marker2,html) {
var infowindow2 = new google.maps.InfoWindow({
content: html });
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
}
}
} else {
$('#map').css({
'height': '15px'
});
$('#map').html("Oops! {!Property__c.Name}'s billing address could not be found, please make sure the address is correct.");
resizeIframe();
}
});
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
});

Refresh DownloadUrl on google map v3 and remove old markers

Hi I had a script and a xml file with 10.000 markers in it. I use markercluster to display the markers, but in order to fill the mobile browsers requierement I must begin the map at a certain zoom level (not to display to many markers). So I want to dynamically load the markers when the user change the zoom or viewport.
Here is my script. I thing I can't get the lat and lng of the LatLngBounds of the current viewport :
var customIcons = {
chambrehote: {
icon: '/wp-content/themes/codium-extend/images/chambre.png',
shadow: '/wp-content/themes/codium-extend/images/icon-shadow.png'
}
};
function initialize() {
var cluster = [];
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng('45.7676067','4.8351733'),
scrollwheel: false,
zoom: 12,
mapTypeId: 'roadmap'
});
var mcOptions = {gridSize: 100, styles: [
{
textColor: 'black',
height: 80,
url: "/wp-content/themes/codium-extend/images/cluster-m1.png",
width: 90
},
{
textColor: 'black',
height: 80,
url: "/wp-content/themes/codium-extend/images/cluster-m2.png",
width: 90
},
{
textColor: 'black',
height: 80,
url: "/wp-content/themes/codium-extend/images/cluster-m3.png",
width: 90
}
]};
var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();
var swPoint = bounds.getSouthWest();
var nePoint = bounds.getNorthEast();
var swLat = swPoint.lat();
var swLng = swPoint.lng();
var neLat = nePoint.lat();
var neLng = nePoint.lng();
downloadUrl("/wp-content/themes/codium-extend/search/search_chambres.php?&type=chambrehote&codgeo=<?php echo $CODGEO ; ?>&radius=200&lat1="+swLat+"&lng1="+swLng+"&lat2="+neLat+"&lng2="+neLng+"", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("ville");
var slug = markers[i].getAttribute("slug");
var stars = markers[i].getAttribute("stars");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> " + "<br/>" + "" + "><a href=" + "/chambre-d-hote/" + slug + "/>lien vers la fiche</a>";
var icon = customIcons[type] || {};
//var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
//bounds.extend(point);
//map.fitBounds(bounds);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() { infowindow.setContent(markers[i].getAttribute("name"));
infowindow.open(map, marker);
}
})(marker, i));
cluster.push(marker);
}
var mc = new MarkerClusterer(map,cluster,mcOptions);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function changePosition() {
var position = document.getElementById('position').value;
adUnit.setPosition(google.maps.ControlPosition[position]);
}
First point :
I think I couldn't get the value of swLat, swLng... for passing them to downloadUrl
And second point I certainly miss a listener somewhere but don't know where !
Thanks for your inputs
---- EDIT ----
Right now I can load dynamically the data when the idle is changed, but (there is a but) now each change a new marker is add even if it's already on the map. Is there a way to clean all the markers when the idle change before loading the new ones?
var cluster = [];
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: new google.maps.LatLng('45.7676067','4.8351733'),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var mcOptions = {gridSize: 100, styles: [
{
textColor: 'black',
height: 80,
url: "/wp-content/themes/codium-extend/images/cluster-m1.png",
width: 90
},
{
textColor: 'black',
height: 80,
url: "/wp-content/themes/codium-extend/images/cluster-m2.png",
width: 90
},
{
textColor: 'black',
height: 80,
url: "/wp-content/themes/codium-extend/images/cluster-m3.png",
width: 90
}
]};
var infoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(map, 'idle', function() {
var bounds = map.getBounds();
var swPoint = bounds.getSouthWest();
var nePoint = bounds.getNorthEast();
var swLat = swPoint.lat();
var swLng = swPoint.lng();
var neLat = nePoint.lat();
var neLng = nePoint.lng();
// alert(swLng);
downloadUrl("/wp-content/themes/codium-extend/search/search_chambres.php?lat=45.7676067&lng=4.8351733&type=chambrehote&codgeo=<?php echo $CODGEO ; ?>&radius=2000&lat1="+swLat+"&lng1="+swLng+"&lat2="+neLat+"&lng2="+neLng+"", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("ville");
var slug = markers[i].getAttribute("slug");
var stars = markers[i].getAttribute("stars");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> " + "<br/>" + "" + "><a href=" + "/chambre-d-hote/" + slug + "/>lien vers la fiche</a>";
var icon = customIcons[type] || {};
//var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
//bounds.extend(point);
//map.fitBounds(bounds);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i].getAttribute("name"));
infowindow.open(map, marker);
}
})(marker, i));
cluster.push(marker);
}
var mc = new MarkerClusterer(map,cluster,mcOptions);
});
});
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function changeFormat() {
var format = document.getElementById('format').value;
adUnit.setFormat(google.maps.adsense.AdFormat[format]);
}
function changePosition() {
var position = document.getElementById('position').value;
adUnit.setPosition(google.maps.ControlPosition[position]);
}

Infobubble only displaying content from last marker added via PHP/Mysql with tabs

I've been trying to get Infobubbles to work with 2 tabs on a map populated with markers from a Mysql database with an ajax call.
The problem is that every infobubble is displaying the same content in the tabs, from the last marker added. Here is the entire js script, any help is greatly appreciated.
var script = '<script type="text/javascript" src="http://google-maps-' +
'utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble';
script += '.js"><' + '/script>';
document.write(script);
var customIcons = {
free: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
animation: google.maps.Animation.DROP,
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
paid: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
animation: google.maps.Animation.DROP,
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
// End Custom Icons
var map, infoBubble;
function initialize() {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position)
{
var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var marker = new google.maps.Marker({
map: map,
position: pos,
icon:'images/markers/you.png',
animation: google.maps.Animation.DROP,
title: 'Your Location.'
});
infoBubble = new InfoBubble({
maxWidth: 300,
borderRadius: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
shadowStyle: 1
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var citystate = markers[i].getAttribute("citystate");
var phone = markers[i].getAttribute("phone");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone; //html inside InfoWindow
var description = "<b>" + name + "</b> <br/>" + address + "<br/>" + citystate + "<br/>" + phone; //html inside InfoWindow
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
animation: google.maps.Animation.DROP
});
bindInfoWindow(marker, map, infoBubble, html, description);
}
infoBubble.addTab('Tab 1', html);
infoBubble.addTab('Tab 2', description);
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infoBubble = new google.maps.infoBubble(options);
map.setCenter(options.position);
}
// Additional functions related to the DB Listing function
function bindInfoWindow(marker, map, infoBubble, html) {
google.maps.event.addListener(marker, 'click', function() {
//infoBubble.setContent(html);
infoBubble.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function addTab() {
var title = document.getElementById('tab-title').value;
var content = document.getElementById('tab-content').value;
if (title != '' && content != '') {
infoBubble.addTab(title, content);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
The code that sets the content depending on the marker is commented out:
//infoBubble.setContent(html);
Therefor the content of the last infowindow created is always displayed.
working example, including the tab content
Q problem in google map information window on marker click when click on next marker it opens the info window with tabs but when again click on next marker then it oepns the info window with tabs but the prevoius tabs did not closed herte is the code
google.maps.event.addListener(marker, 'click', (function(marker, contentString) {
return function() {
infoBubble.addTab('Tab 1', contentString);
infoBubble.addTab('Tab 2', contentString12);
infoBubble.setContent(contentString);
infoBubble.close('Tab 1', contentString);
infoBubble.open(map,marker);

Google Places API - Adding Places Details

I have the following code:
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(start,showError);
}
else{
error('Geo Location is not supported');
}
}
function start(position) {
var mySearch = document.getElementById("search").value;
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng,
zoom: 12
});
var request = {
location: latlng,
radius: 500,
query: mySearch
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name, place.website);
infowindow.open(map, this);
});
}
The code works fine however I am trying to retrieve more details about a place. I know about the place details at: https://developers.google.com/maps/documentation/javascript/places#place_details I'm just unsure where and how to adjust my code to say add in the places website. I'm struggling to work out where to get the reference and then how to use it. If someone could write it within my code that would be great.
Adjusted "createMarker" function (not tested):
function createMarker(place) {
var placeLoc = place.geometry.location;
if (place.icon) {
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(71, 71),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
} else var image = null;
var marker = new google.maps.Marker({
map: map,
icon: image,
position: place.geometry.location
});
var request = {
reference: place.reference
};
google.maps.event.addListener(marker,'click',function(){
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
contentStr += '<br>'+place.types+'</p>';
infowindow.setContent(contentStr);
infowindow.open(map,marker);
} else {
var contentStr = "<h5>No Result, status="+status+"</h5>";
infowindow.setContent(contentStr);
infowindow.open(map,marker);
}
});
});
}
working example

Trouble clearing overlay when i reload a new set of markers in gmaps

I have a gmap and I only want to display markers in the viewable area. I have added a listener to get the bounds of the map and call gather the markers within the bounds. the problem is that when i bounds change, i want to clear the map and reload with the updated markers. currently the map will just continue to reload the markers on top of each other which makes the map extremely slow. I have tried:
google.maps.event.addListener(map, 'bounds_changed', function () {
clearOverlays();
loadMapFromCurrentBounds(map);
});
And that will not load any markers at all. I have also tried:
function loadMapFromCurrentBounds(map) {
clearOverlays();
And this will not load any markers either. Below is the code that will load all markers and functions as i want it to with the exception of clearing the old markers when the bounds change.
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'bounds_changed', function () {
loadMapFromCurrentBounds(map);
});
}
function clearOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
}
}
function loadMapFromCurrentBounds(map) {
clearOverlays();
var infoWindow = new google.maps.InfoWindow;
var bounds = map.getBounds(); // First, determine the map bounds
var swPoint = bounds.getSouthWest(); // Then the points
var nePoint = bounds.getNorthEast();
// Change this depending on the name of your PHP file
var searchUrl = 'Viewport_Search.php?west=' + swPoint.lat() + '&east=' + nePoint.lat() + '&south=' + swPoint.lng() + '&north=' + nePoint.lng();
downloadUrl(searchUrl, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: point,
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
Please help... I have been beating my head against the computer all night researching and trying to figure this out. Feel free to email and/or ask for any questions.
You cant remove all markers, but it is possible to setMap to null on every visible marker.
I am doing it like that
add markers array to map object
add clearAllMarkers function to map object
every marker is added to the map is also added to markers array
clearAllMarkers function is something like that:
for (var idx=0;idx<=map.markers.length;idx++){
map.markers[idx].setMap(null);
}
I belive you are adding separate markers object to you're markers array. You're markers array should be full of markers references!!!
var map = []; //elrado's code
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap'
});
map.markers = [];//elrado's code (add narkers.array to map object)
google.maps.event.addListener(map, 'bounds_changed', function () {
loadMapFromCurrentBounds(map);
});
}
function clearOverlays() {
if (map.markers) {
for (i in map.markers) { //Might be you'll need to use map.markers.length
markers[i].setMap(null);
}
map.markers = [];//reinit map.markers.array
}
}
function loadMapFromCurrentBounds(map) {
clearOverlays();
var infoWindow = new google.maps.InfoWindow;
var bounds = map.getBounds(); // First, determine the map bounds
var swPoint = bounds.getSouthWest(); // Then the points
var nePoint = bounds.getNorthEast();
// Change this depending on the name of your PHP file
var searchUrl = 'Viewport_Search.php?west=' + swPoint.lat() + '&east=' + nePoint.lat() + '&south=' + swPoint.lng() + '&north=' + nePoint.lng();
downloadUrl(searchUrl, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: point,
});
map.markers.push(marker);//elrado's code
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
I have to warn you that this was written from the head (no test), but something like that should work. Basicly you are setting setMap(null) on separate markers not on objects you're showing on the map.
Below is the complete code solution to the problem.. Thanks for your help.
var map; //elrado's code
var markersArray = []; //elrados's code create array for markers
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(33.553029,-112.054017),
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, 'tilesloaded', function () {
clearOverlays()
loadMapFromCurrentBounds(map);
});
}
function clearOverlays() { //clear overlays function
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
function loadMapFromCurrentBounds(map) {
var infoWindow = new google.maps.InfoWindow;
var bounds = map.getBounds(); // First, determine the map bounds
var swPoint = bounds.getSouthWest(); // Then the points
var nePoint = bounds.getNorthEast();
// Change this depending on the name of your PHP file
var searchUrl = 'Viewport_Search.php?west=' + swPoint.lat() + '&east=' + nePoint.lat() + '&south=' + swPoint.lng() + '&north=' + nePoint.lng();
downloadUrl(searchUrl, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: point,
});
markersArray.push(marker); //eldorado's code Define the array to put markers in
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}