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);