CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3
Matthew
Matthew

Reputation: 9949

Modifying the page from a google maps marker click event

I am trying to modify page a Google Map is embedded in when the user clicks on a marker (resize the map and display info about the marker). I thought I could just do something like this as an example for the resizing of the map:

google.maps.event.addListener(marker, 'click', function () {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
    $('#MapContainer').switchClass("MapContainer", "MapContainerSmall");
    $('#MapCanvas').switchClass("MapCanvas", "MapCanvasSmall");
    google.maps.event.trigger(map, 'resize')
});

But the jQuery does not execute / change the class. I am assuming this is because I cannot place jQuery code within the Google maps API events?

I realize there must be lack of understanding on my part in what I am able to do here - can someone push me in the right direction?

EDIT:

Fiddle example: http://jsfiddle.net/43XbM/

Upvotes: 0

Views: 65

Answers (1)

geocodezip
geocodezip

Reputation: 161324

You need to wait for the div switch to be complete (the "complete" option in the switchClass function) before triggering the resize event and setting the new center and zoom.

var map;
var site1 = new google.maps.LatLng(67.62, -134.13);


    var latlng = new google.maps.LatLng(64, -117);
    var settings = {
        zoom: 4,
        maxZoom: 10,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("MapCanvas"), settings);
    var marker = new google.maps.Marker({
        position: site1,
        map: map,
        title: "Hello World!"
    });

    google.maps.event.addListener(marker, 'click', function () {

        $('#MapContainer').switchClass("MapContainer", "MapContainerSmall");
        $('#MapCanvas').switchClass("MapCanvas", "MapCanvasSmall", null, null,
          function() {
          google.maps.event.trigger(map, 'resize')
          map.setZoom(8);
          map.setCenter(marker.getPosition());
        });

    });

Working fiddle

Upvotes: 1

Related Questions