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