How to Display Multiple Google Maps per page with API V3

by

Here is how I have been able to generate multiple maps on the same page using Google Map API V3. Kindly note that this is an off the cuff code that addresses the issue above.

The HTML bit

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;"></div>
<div id="map_canvas2" style="width:700px; height:500px; margin-left:80px;"></div>

Javascript for map initialization

<script type="text/javascript">
var map, map2;

function initialize(condition) {
    // create the maps
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(0.0, 0.0),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}
</script>

More Related Contents:

  1. Verify if a point is Land or Water in Google Maps
  2. Google Maps v3 – limit viewable area and zoom level
  3. How to make cross-domain AJAX calls to Google Maps API?
  4. How to call fromLatLngToDivPixel in Google Maps API V3?
  5. Google Maps JavaScript API RefererNotAllowedMapError
  6. Google Maps API – Getting closest points to zipcode
  7. Google maps API V3 – multiple markers on exact same spot
  8. Google Map API – multiple icons in wrong spot
  9. Google Maps API v3: Can I setZoom after fitBounds?
  10. How to set zoom level in google map
  11. How can I create numbered map markers in Google Maps V3?
  12. Google Maps JavaScript API won’t display markers from KML exported from My Maps
  13. Maximum Lat and Long bounds for the world – Google Maps API LatLngBounds()
  14. Google Maps API v3 adding an InfoWindow to each marker
  15. Inconsistent behaviour drawing a route between two points in Google Maps v3
  16. Country specific zoom level in Google Maps API
  17. polyline snap to road using google maps api v3
  18. Multiple markers Google Map API v3 from array of addresses and avoid OVER_QUERY_LIMIT while geocoding on pageLoad
  19. Center Google Maps (V3) on browser resize (responsive)
  20. Google Maps Api v3 – getBounds is undefined
  21. Can I remove just the popup bubbles of POI’s in Google Maps API v3?
  22. Is there a way to Fix a Google Maps Marker to the Center of its Map always?
  23. Letting users draw curved lines on a google map?
  24. How can I modify the markers?
  25. remove route with google map
  26. Check if a latitude and longitude is within a circle google maps
  27. Highlight polygon and tint rest of map using Google Maps [duplicate]
  28. Using Longitude/Latitude as Waypoint
  29. How to connect two points in Google map..?
  30. Google Maps API Multiple Markers with Infowindows

Leave a Comment