Lohn Claidon
Lohn Claidon

Reputation: 415

Google Maps API: Geocoder and info window

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

Answers (1)

Anto Jurković
Anto Jurković

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

Related Questions