Reputation: 57
I have been playing around with the Google Maps API and managed to do what I wanted. Basically I'm creating a custom map using some specific parameters from the HTML. The map works well and the marker pops at the correct location, however I have two small issues which I am not able to fix:
The marker's link doesn't work - I get the following error message in my log: Uncaught TypeError: Cannot read property '_e3' of undefined
When the page loads the map is set on the default location first, then it updates with the specific location when the function is run. Is there anyway I can make it load with the correct location at once?
Here is the HTML code with the specific parameters:
<div id="map" data-map-address="120-124 Curtain Road, London, EC2A 3SQ" data-map-link="http://my-destination-link.com"></div>
And here is the JavaScript I use to generate the map:
var map,
geocoder,
mapElem = document.getElementById('map'),
mapHolder = $('#map'),
mapAddress = mapHolder.attr("data-map-address"),
mapUrl = mapHolder.attr("data-map-link"),
image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
new google.maps.Size(123, 123),
new google.maps.Point(0,0),
new google.maps.Point(11, 96));
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(51.51121, -0.11982),
mapOptions = {
zoom: 16,
disableDefaultUI: true,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapElem, mapOptions);
}
function codeAddress() {
geocoder.geocode( { 'address': mapAddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
url: mapUrl,
title: 'Click here to emlarge the map',
icon: image
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', codeAddress);
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
I would really appreciate if someone could help me to solve these two issues. I looked online and tried the workarounds I found, but I couldn't get it to work properly.
Thanks!
Upvotes: 0
Views: 2739
Reputation: 8954
Not sure about why the link is failing but to make the map load at the correct location off-the-bat you're going to have to geocode the location first and once you get a response from the maps api you can then build your map with the correct starting position.
var map,
geocoder,
mapElem = document.getElementById('map'),
mapHolder = $('#map'),
mapAddress = mapHolder.attr("data-map-address"),
mapUrl = mapHolder.attr("data-map-link"),
image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
new google.maps.Size(123, 123),
new google.maps.Point(0, 0),
new google.maps.Point(11, 96));
function initialize(geoLocation) {
mapOptions = {
zoom: 16,
disableDefaultUI: true,
center: geoLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapElem, mapOptions);
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': mapAddress
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
initialize(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
url: mapUrl,
title: 'Click here to enlarge the map',
icon: image
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = marker.url;
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
//Call codeAddress to initialize the geocoding. When that returns it will initialize the map with the geocode location
codeAddress();
Upvotes: 0
Reputation: 15213
1: I would put the codeAddress()
inside your initialize for the onload bit. Don't set a center yet in the initialize but wait for the codeAddress()
to find and set the location.
2: You get that error because you are putting the eventlistener for your marker in the wrong place. Out there it does not know what the variable marker
is. You need to place it where your marker is created (inside your codeAddress()
function.
var map,
geocoder,
mapElem = document.getElementById('map'),
mapHolder = $('#map'),
mapAddress = mapHolder.attr("data-map-address"),
mapUrl = mapHolder.attr("data-map-link"),
image = new google.maps.MarkerImage('http://my-marker-link.com/marker.png',
new google.maps.Size(123, 123),
new google.maps.Point(0,0),
new google.maps.Point(11, 96));
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 16,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapElem, mapOptions);
codeAddress();
}
function codeAddress() {
geocoder.geocode( { 'address': mapAddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
url: mapUrl,
title: 'Click here to emlarge the map',
icon: image
});
// Add your event listener
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Upvotes: 1