Reputation: 415
I'm very new at javascript, and I must say I'm not good at all. For my website, I have an event page where I put the location of the event, and I want a map next to it with markers locating the locations.
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() {
var paris = new google.maps.LatLng(48.858859, 2.3470599)
var lieu1 = new google.maps.LatLng(48.8531128, 2.3493023)
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: paris,
zoom: 12
}
map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions
);
/*
This works:
var contentString = 'Lorem Ipsum';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200
});
var marker = new google.maps.Marker({
position: lieu1,
map: map,
title: 'Lorem Ipsum!',
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});*/
var contentString2 = 'Lorem Ipsum123';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2,
maxWidth: 200
});
var address = "Paris";
geocoder.geocode( { 'address': address}, function(results) {
var marker2 = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'Lorem Ipsum!',
animation: google.maps.Animation.DROP
});
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here is my code, I added several features like dropping ping. Thank you :)
Upvotes: 0
Views: 1253
Reputation: 11258
There is no question...
One issue with your code, there is error reported:
Uncaught ReferenceError: marker2 is not defined
because variable marker2
is not visible outside of geocoder.geocode()
method. You have to move event listener just after marker definition:
geocoder.geocode( { 'address': address}, function(results) {
var marker2 = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'Lorem Ipsum!',
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map, marker2);
});
});
and infowindow will show up on marker click.
Upvotes: 2