SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Loading more than one Google gmap api

    Hey guys,

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

    Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    What do you mean by different map locations? Do you mean multiple markers o the one map?

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking to load 3 separate maps on the same page with different locations

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,217
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    I guess you'd give each a separate ID in the HTML and reflect that here:

    Code:
    jQuery('#googlemaps').gMap({
    E.g.

    Code:
    jQuery('#googlemaps').gMap({
    			maptype: 'ROADMAP',
    			scrollwheel: false,
    			zoom: 13,
    			markers: [
    				{
    					address: 'Perth, Western Australia', // Your Adress Here
    					html: '',
    					popup: false,
    				}
    
    			],
    			
    		});
    
    jQuery('#googlemaps1').gMap({
    			maptype: 'ROADMAP',
    			scrollwheel: false,
    			zoom: 13,
    			markers: [
    				{
    					address: 'Darwin, Northern Territory', // Your Adress Here
    					html: '',
    					popup: false,
    				}
    
    			],
    			
    		});
    
    
    jQuery('#googlemaps2').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. #5
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Ralph,

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

    going to keep researching and let you know my findings

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok almost got it working with this code

    Javascript:
    HTML Code:
    <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:
    HTML Code:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •