Google maps and markers

1st July

2011

written by admin

<!DOCTYPE html>
<html>
<head>

<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(53.294372,-3.722788);
    var myOptions = {
      zoom: 8,
      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,
 });   

   var myLatlng = new google.maps.LatLng(53.321721,-3.487439);

    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        draggable:true,
        icon:'http://www.gpsurgery.info/gp_marker.png',
        title:'this is a nice map tutorial'
 });   

  }
</script>

</head>
<body onload="initialize()">
<div id="map_canvas"style="width:330px;height:330px;"></div>

</body>

</html>

Google Maps With Multiple Markers

As we can place markers on maps displayed by static and dinamic pages we have to follow two different paths. As we have to start with the basics and we don’t want to get lost with all the stuff we have to learn to make dinamic pages we take static pages first. Unlike dinamic pages static pages has staic content and static source code including the code which displays google maps. This is why we need to manually add a few lines of code in order to display an extra marker.The code looks like this: var marker = new google.maps.Marker({ position: myLatlng, map: map, });
This extra marker would be displayed exacltly where the other marker is so doesnt make too much sense to place it on the map. In order to place a new marker on a new point we have to adjust the values of the myLatLng object which is quite simple, we have to assign different latitude and longitude values : var myLatlng = new google.maps.LatLng(53.321721,-3.487439);
If we have a closer look at the second marker we can see it doesn’t look the same as the firs one.This marker is draggable and its not the default markerimage.If we examine the source code on the left hand side of the screen we can find the code lines responsibile for the difference.
draggable:true makes the marker draggable and icon:’http://www.gpsurgery.info/gp_marker.png’ is placing a differnt markerimage on the map.
Markerimagesshould be images with ‘png’ file format. They can be called by their absolute url if the are not on the same site as our page.if they are under the same domain we can call it either absolute or relative url.
Title:We can add a title to markers. it is not difficult all we have to do just add title:’this is a nice map tutorial’

Useful Web Links

Google Maps & WordPress

Google maps and markers

Google Maps With Multiple Markers

Leave a Reply

Multiple Marker

Streetview Map

Draggable Marker