• Peak Studios
• Gallery
• Products
• Services
• News
• FAQ
• Wiki
• Support
• Contact
• Tutorials
• Downloads

In this brief tutorial you will learn how to add Google Maps to you WordPress blog.

1 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

2 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 adress can go from exact to just the state or country.

You can add atributes 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

We hope you enjoy this script.
Peak Studios
Staff

This entry was posted on Monday, March 10th, 2008 at 8:33 pm and is filed under Custom WordPresss, Google, JavaScript, Marketing, Mobile Marketing, PHP, Peak Studios, Search engine submission (SEO), Tutorials, Wordpress, custom, google maps, script type, web design, web development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.