Question

I am working my way through the Google Maps API and have the following thusfar:

var infowindow = null;

$(document).ready(function () { initialize();  });

function initialize() {

    var centerMap = new google.maps.LatLng(39.828175, -98.5795);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });

    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(map);
}

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}

I tried to create a Fiddle but it was not showing up.

So, the map supports multiple locations and info boxes, but the part I’m still very confused on is custom info boxes. I did some searching and saw this question/answer, but am having trouble understanding exactly how that works. So, let’s say I have my #map_canvas map and then outside of that, I have an existing #info div (where I would like each info box loaded). So – the styles are not defined in the Google Maps API, it is an existing element that should take over as the info box.

Would anyone be able to nudge me along (or in this case, a shove would be great) to help me better understand how to do this? A quick screen shot of what I’m thinking can be found here. The dark red box on-top of the map is the target.

The custom markers and “active” state (the gold icon for the selected marker) are another challenge as well, but I haven’t given up all hope on those just yet. Any help would be greatly appreciated. Thanks!

Answer 1

Its been a while but this should work.

When you create your markers, append whatever data you want to append to this marker.

Here is using the setMarkers function. Glad you added it (Was wondering where you have your loop)

In the html have your div to take this data like

 <div id="myDivID"></div>

In your js add a reference to it and insert html there

function setMarkers(map, markers) {
    var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem  

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        });

        var contentString = "Some content";
        //marker.xtraData = 'SomeExtraData';//You can even add more data this way

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';

            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

Depending on what you are doing you may also want to check out leaflet. Its quite a bit faster than google maps on mobile browsers, and better than ios6 maps hehe.