Menu
My map was working perfectly; plotting markers with radius circles around them with infoWindows displaying on click. Then suddenly nothing.
Someone please find what I'm not seeing!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#map_canvas {
width:1000px;
height:700px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var addresses = ["117 Balsam Avenue,Hamilton,Ontario,Canada,L8M 3B4", "47 East Avenue,Hamilton,Ontario,Canada,L8L 5H4"];
var map;
var infoWindow;
function encodeAddresses(addresses, callback) {
var geocoder = new google.maps.Geocoder();
for (var i = 0; i < addresses.length; i++) {
geocoder.geocode({
'address' : addresses[i]
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.Qa;
var long = results[0].geometry.location.Pa;
var address = results[0].formatted_address;
addCircleToMap(lat, long, address);
addMarkerToMap(lat, long, address);
}
});
}
}
function addCircleToMap(lat, long, address) {
var options = {
strokeColor : "#4EA429",
strokeOpacity : 0.8,
strokeWeight : 1,
fillColor : "#4EA429",
fillOpacity : 0.35,
map : map,
center : new google.maps.LatLng(lat, long),
radius : 1000,
address : address
};
var propertyRadius = new google.maps.Circle(options);
google.maps.event.addListener(propertyRadius, 'click', showInfo);
}
function showInfo(e) {
infoWindow.setContent(this.address + "<br />(1000m/3280ft radius)");
infoWindow.setPosition(e.latLng);
infoWindow.open(map);
}
function addMarkerToMap(lat, long, address) {
new google.maps.Marker({
title : address,
map : map,
position : new google.maps.LatLng(lat, long)
});
}
function renderMap() {
var mapContainer = document.getElementById("map_canvas");
var mapOptions = {
zoom : 9,
center : new google.maps.LatLng(43.645004, -79.380707),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
adjustMapContainerHeight(mapContainer);
map = new google.maps.Map(mapContainer, mapOptions);
infoWindow = new google.maps.InfoWindow();
}
function adjustMapContainerHeight(element) {
element.style.height = (document.height - 90) + "px";
}
function getCurrentPosition(defaultLatitude, defaultLongitude, callback) {
var currentPosition = {};
currentPosition.latitude = defaultLatitude;
currentPosition.longitude = defaultLongitude;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
currentPosition.latitude = position.coords.latitude;
currentPosition.longitude = position.coords.longitude;
},
function (error) {});
}
callback(currentPosition);
}
getCurrentPosition(43.645004, -79.380707, renderMap);
encodeAddresses(addresses, addCircleToMap);
</script>
</body>
</html>
Once try to change the following lines in encodeAddresses() function.Its working fine in my machine with the changes:
var lat = results[0].geometry.location.Pa;
var long = results[0].geometry.location.Qa;
You are using Pa as long and Qa as lat which is not google supported one.So change the two lines and check.
Hope this helps you :-)
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
