Adding Google Maps to WordPress

In this brief tutorial Peak Studios Teaches you how to add Google Maps to you WordPress blog.

• Copy the code below:

<script type=”text/javascript”
src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=GET YOUR GOOGLE API KEY”>
</script>
<script type=”text/javascript”>
function initialize() {
var mapCheck = document.getElementById(“map_canvas”);
if(mapCheck){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
var address = map_canvas.getAttribute(“address”);
var geocoder = new GClientGeocoder;
map.addMapType(G_PHYSICAL_MAP);
geocoder.getLatLng(address, function(point){
if(point){
map.clearOverlays();
map.setCenter(point, 15, G_PHYSICAL_MAP);
var marker = new GMarker(point);
map.addOverlay(marker);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
});
}}
}
</script>paste the code into the head of wp-content/theme/YOUR THEME/header.php

• Copy and paste the code below in to any post you want a map on:

<div id=”map_canvas” style=”width:740px; height:300px;” address=”Boulder, CO”>You can change the size of the map and the location.
The address can go from exact to just the state or country.

You can add attributes in the div tag to do any thing you want just be sure to add the functionality to the java script.
Some great resources for learning more about the Google Maps API are:

http://www.google.com/help/maps/tour

http://www.youtube.com/watch?v=hYB0mn5zh2c&feature=related

Categorised in: Tutorials

This post was written by admin