Question

I’ve familiarized myself with the Google Maps PI v3 enough that I can make the kind of maps I want, with the custom markers and info windows that I need. What I can’t seem to find info on is integrating this into something like a WordPress blog. I know there are plugins, but none of them seem to be what I’m looking for.

Here’s what I’d like to do: In my header file, included the basic code for Google maps, including styles. In whatever blog post I use a map, included specific code on geolocation, zoom level, marker, and info window.

Is this possible? How would I set this up?

Answer 1

EDIT: my last example was supposed to be a general idea… Here’s a working implementation.

html

map 1
<div class="gmap">{"center":{"lat":46.87916,"lon":-3.32910,"zoom":6},"type":"terrain","markers":[{"lat":46.87916,"lon": -3.32910,"info":"some info here"}]}</div>
map 2
<div class="gmap">{"center":{"lat":46.87916,"lon":-3.32910,"zoom":6},"type":"terrain","markers":[{"lat":46.87916,"lon": -3.32910,"info":"some info here"}]}</div>

jquery to create the maps

$(".gmap").each(function() {
    var data = $.parseJSON($(this).html());
    $(this).html("");
    var myOptions = {
        zoom: data.center.zoom,
        center: new google.maps.LatLng(data.center.lat, data.center.lon),
        mapTypeId: data.type
    };
    var map = new google.maps.Map(this, myOptions);

    for (var i = 0; i < data.markers.length; i++) {
        var marker = data.markers[i];
        new google.maps.Marker({
            position: new google.maps.LatLng(marker.lat, marker.lon),
            title: marker.info,
            map: map
        });
    }
});

demo: http://jsfiddle.net/djs5x/1/
json generator: http://jsfiddle.net/X5r8r/153/