Howto implement google maps and a marker

By Nisse Pettersson at December 09, 2009 05:59
Filed Under: Code
Share on Facebook

I'm developing a site for a customer who wish to have  a map of his stores and a marker as well. Googles new v3 API of google map is what i'm using since it's newer and hade a nice look and feel than v2.

In my application i'm reading the coordinates from a database but for this example we will use static. Paste the following code in your <HEAD> secion.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(<? echo $clsShop->LatLong;?>);
    var myOptions = {
      zoom: 13,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        title:"Hello World!"
    });   
  }


</script>

In your <BODY> tag we will load the map with the onLoad command and unload it when we leave. Use the following tag.

<body onload="initialize()" onunload="GUnload()">

 

Then all you need to do is to create a <div> with id = map_canvas where you wish to place the map. You can use the following example.

<div id="map_canvas" style="width: 220px; height: 220px"></div>

 

Then you're all set and google maps will load. If not you might need sign up for the google API. For more examples you can check out googles own example gallery



Tags: , , , , ,
Comments (0) E-mail Kick it! DZone it! del.icio.us Permalink Post RSS