Simple GoogleMap made easy

23. februar 2010 by Thomas Stern

I recently had to make a page showing different locations each with it own little googlemap.

To make it easy to use i used jQuery to hook in a create the googlemap from the html. The map generatet is a simple map with one marker and centered on this marker. with an width and height set to 400px

gmaps

So I used span tag html to set the settings need for generating each googlemap.
I then use jQuery to look for a container that have one or multple of theese maps inside and add a map to the specific "mapItem"

The html needed for one item is as shown below:

 

<div class="Map">

  <span class="MapSettings">

    <span class="longtitude">Na;</span>

    <span class="longtitude">Na</span>

    <span class="mapId">Map0</span>

    <span class="address">Pentia store kongensgade 66 copenhagen denmark</span>

    </span>

    <div id="Map0" class="GoogleMap" style="width:400px; height:400px;">

    </div>

  </div>

 

To get it all to wok you of course need a googlemapApi key get from here

Here is the jquery file i used to hook in on document ready function note if the longtitude and/or latitude isn't set i'l try to and a marker to map from the address if that fails to you'll get an invalide map.

 

 

jQuery(document).ready(function()
{
  buildMapsFromHTML();
}
)

/*****************

*  MAP SEETINGS  *

*****************/
var map;
var geocoder;
var zoomLevel = 14;
var mapIndex = 0;
 

/*****************

*  MAP FUNCTIONS *

*****************/
function buildMapsFromHTML(){
  var googleMaps = jQuery(".Map");
  var i;
  for (i = 0; i < googleMaps.length; i++)
  {
    mapIndex = i;
    addMap(googleMaps[i],mapIndex);
  }
}

function addMap(mapSettings) {
  // GET SETTINGS FROM HTML
  var setting = jQuery(mapSettings).children(".MapSettings");
  var mapId = jQuery(setting).children(".mapId").html();
  var longtitude = jQuery(setting).children(".longtitude").html();
  var latitude = jQuery(setting).children(".latitude").html();
  var address = jQuery(setting).children(".address").html();

 
  if (latitude != "Na" || longtitude != "Na") {
    initializeMap(mapId);
    addMarkerToMap(longtitude, latitude);
    centerMap(longtitude, latitude);
  }
  else{
    generateMapFromAddress(address,mapId);
  }
}

function initializeMap(mapId) {
   map = new GMap2(document.getElementById(mapId));
}

function generateMapFromAddress(address,mapId) {
  var coordinate = cordinatesFromGoogle(address,mapId)
}

function cordinatesFromGoogle(address,mapId) {

  geocoder = new GClientGeocoder();

  geocoder.getLatLng(address, function(point) { 
  if(point) {
    var longtitude = point.lng().toFixed(5)
    var latitude = point.lat().toFixed(5)
    initializeMap(mapId);
    addMarkerToMap(longtitude, latitude);
    centerMap(longtitude, latitude);
  }
  })
}

function addMarkerToMap(longtitude, latitude) {
  var point = new GLatLng(latitude, longtitude);
  var marker = new GMarker(point);
  map.addOverlay(marker);
}

function centerMap(longtitude, latitude) {
   var point = new GLatLng(latitude, longtitude);
    map.setCenter(point, zoomLevel);
}

 

So an example html to bind it all together could look like this:

 

 

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=localhost type="text/javascript"></script>
<script type="text/javascript" src="googlMaps.js"></script>
</head>

<body>
<div class="Map">
  <span class="MapSettings">
    <span class="longtitude">Na</span>
    <span class="latitude">Na</span> 
    <span class="mapId">Map0</span> 
    <span class="address">store kongensgade 66 copenhagen denmark</span> 
  </span>
    <div id="Map0" class="GoogleMap" style="width:400px; height:400px;">
    </div>
 </div>
 
 <div class="Map">
  <span class="MapSettings">
    <span class="longtitude">Na</span>
    <span class="latitude">Na</span> 
    <span class="mapId">Map1</span> 
    <span class="address">store kongensgade 66 copenhagen denmark</span> 
  </span>
    <div id="Map1" class="GoogleMap" style="width:400px; height:400px;">
    </div>
 </div>
 
 </body>
</html>

If no longtitude or/and latitude is set i gets the marker from the address.
and Na should be used to say that you dont have those values. Offcourse it could be extended to specify which kind of map and so on. This could be set in the settings as well togehter with zoomlevel and so on.

remember to set the googlemap key to your domain

 

 

 

 

 

0 comment(s) for “Simple GoogleMap made easy”

    Leave comment: