Question

I’d like to rebuild a map with the same gestures as this one buily by http://marcgrabanski.com/ using the V2 api.

http://assets.marcgrabanski.com/resources/jquery-google-maps/tutorial-part1.html

But I would like to use the V3 API. But I feel the v3 is more, maybe unnecessarily, complicated and I would like to find a working example to start built in v3.

Any suggestions?

Answer 1

To demonstrate gmaps api v3, I’ve just put up a small example for you here. This is just off-the-cuff code based on the example you have mentioned in your post. Just enter the co-ordinates to add the markers on to map and then select the specific marker to display the info window.

The main parts of the code are

Creation of the map

function initialize(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(52.0, 62.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

infowindow = new google.maps.InfoWindow(
                { 
                    size: new google.maps.Size(150,50)
                });

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

markersArray = [];

}

Creating the markers

    function createMarker(latlng, html,zoom) {
   var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });
    marker.MyZoom = zoom; 
    return marker; 
}

The google maps api v3 is far better designed and you can check out some other samples here.