Google Maps API v3

1. To create an empty Google Map in your webpage:
a. Load the Google Map API from http://maps.googleapis.com/maps/api/js
b. Create a div element to place the map
c. Create the Map Options literal to define a Map Type and a center point with Longitude and Latitude
d. Create an instance of your actual map
e. Load the map on your page
http://learnfromlocals.com/examples/google-maps-example1.html

2. To create a Google Map with Markers and Info Windows
a. Follow the Steps described under 1.
b. To add points to your map, you need to add so-called overlays with markers to your map.
http://learnfromlocals.com/examples/google-maps-example2.html

var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  var latlon0 = new google.maps.LatLng(37.918201, 25.44342);
  var options = {
    zoom: 7,
    center: latlon0,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), options);
  
  addMarker(37.030994, 25.499511, 'Cave of Zeus, Naxos, Greece');
  addMarker(37.609421, 26.239854, 'Birthplace of Dionysis, Mount Pramnos, Ikaria, Greece');
  addMarker(38.496594, 26.130066, 'Homer's Rock, Vrandados, Chios, Greece');
}

function addMarker(lat, lon, content){
  var latlon = new google.maps.LatLng(lat, lon);
  var marker = new google.maps.Marker({
	  position:latlon,
	  map: map,
	  title:content
  })
  google.maps.event.addListener(marker, 'click', function(){
	  infowindow.close();
	  infowindow.setContent(content);
	  infowindow.open(map, marker);
  });
}

3. Use a simplified JavaScript library to create a Google Map with markers and InfoWindows:
a. Add a script tag to load caprioit-googlemaps-lib.js,
b. Create a map,
c. Add the markers.
http://learnfromlocals.com/examples/google-maps-example4.html

  var divid = 'map_canvas';
  var zoomlevel = 7;
  var centerlat = 37.918201;
  var centerlon = 25.44342;
  var maptypeid = google.maps.MapTypeId.ROADMAP;
	  
  var map = new MyGoogleMap(divid, zoomlevel, centerlat, centerlon, maptypeid);
	  
  map.addMarker('Cave of Zeus, Naxos, Greece', 37.030994, 25.499511);
  map.addMarker('Birthplace of Dionysis, Mount Pramnos, Ikaria, Greece', 37.609421, 26.239854);
  map.addMarker('Homer's Rock, Vrandados, Chios, Greece', 38.496594, 26.130066);

Leave a Reply

Your email address will not be published. Required fields are marked *