Loading more than one Google gmap api

HTML & CSS
1

Hey guys,

Currently using the following script on my page to load a google map

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<script src="js/jquery.gmap.min.js"></script>
		
		<script type="text/javascript">
		jQuery('#googlemaps').gMap({
			maptype: 'ROADMAP',
			scrollwheel: false,
			zoom: 13,
			markers: [
				{
					address: 'Perth, Western Australia', // Your Adress Here
					html: '',
					popup: false,
				}

			],
			
		});
		</script>

I want to use this same code but with different map locations. What would be the best way to achieve this effect?

2

What do you mean by different map locations? Do you mean multiple markers o the one map?

3

Looking to load 3 separate maps on the same page with different locations

4

I guess you’d give each a separate ID in the HTML and reflect that here:

jQuery('#[COLOR="#FF0000"]googlemaps[/COLOR]').gMap({

E.g.

jQuery('#[COLOR="#FF0000"]googlemaps[/COLOR]').gMap({
			maptype: 'ROADMAP',
			scrollwheel: false,
			zoom: 13,
			markers: [
				{
					address: 'Perth, Western Australia', // Your Adress Here
					html: '',
					popup: false,
				}

			],
			
		});

jQuery('#[COLOR="#FF0000"]googlemaps1[/COLOR]').gMap({
			maptype: 'ROADMAP',
			scrollwheel: false,
			zoom: 13,
			markers: [
				{
					address: 'Darwin, Northern Territory', // Your Adress Here
					html: '',
					popup: false,
				}

			],
			
		});


jQuery('#[COLOR="#FF0000"]googlemaps2[/COLOR]').gMap({
			maptype: 'ROADMAP',
			scrollwheel: false,
			zoom: 13,
			markers: [
				{
					address: 'Melbourne, Victoria', // Your Adress Here
					html: '',
					popup: false,
				}

			],
			
		});

I suppose there must be more sophisticated ways to go, but that should do the job, at least.

5

hi Ralph,

I thought this also but when I tried the above suggestion had no luck :frowning:

going to keep researching and let you know my findings

6

Ok almost got it working with this code

Javascript:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		
		<script type="text/javascript">
 		function initialize()
{
    var map1latlng = new google.maps.LatLng(-31.9333, 115.8333);
	var map2latlng = new google.maps.LatLng(-31.9333, 115.8333);
	var map3latlng = new google.maps.LatLng(-31.9333, 115.8333);
    var myOptions =
    {
        zoom: 11,
        center: map1latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var myOptions2 =
    {
        zoom: 11,
        center: map2latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var myOptions3 =
    {
        zoom: 11,
        center: map3latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
    var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);
    google.maps.event.addListener(map, "zoom_changed", function()
    {
        zoomLevel = map.getZoom();
        map2.setZoom(zoomLevel);
        map3.setZoom(zoomLevel);
    })
    google.maps.event.addListener(map, "drag", function()
    {
        centre = map.getCenter();
        map2.setCenter(centre);
        map3.setCenter(centre);
    })
}
</script>

HTML:

<div id="map_canvas" class="google-map google-map-full" style="height:250px"></div>
<div id="map_canvas_2" class="google-map google-map-full" style="height:250px"></div>
<div id="map_canvas_3" class="google-map google-map-full" style="height:250px"></div>