Multiple Google Maps on one page?

Get Started
1

Im looking for a method to add multiple google maps to one page, cant seem to find a solution that works out the box.

thx in advance

2

You can use the Javascript API to relatively easily add multiple boxes: Google Maps Javascript API V3 Tutorial - Google Maps JavaScript API V3 - Google Code

If you basically just use that Hello World tutorial, specifying your Lat/Long, you can pretty easily add multiple maps.

3

Hi,

Me too I want to display 2 maps. The following code displays a Google Map properly:


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD1wOf9ISBejnZhC-umNwWdaQbuSk3mMwg&sensor=false"> </script>
<script src="Scripts/markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/data.json"></script>

    <script type="text/javascript">
        var script = '<script type="text/javascript" src="Scripts/markerclusterer';
        if (document.location.search.indexOf('compiled') !== -1) {
            script += '_packed';
        }
        script += '.js"><' + '/script>';
        document.write(script);
    </script>

    <script type="text/javascript">
        function initialize() {
            var center = new google.maps.LatLng(37.4419, -122.1419);

            var map2 = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var markers = [];
            for (var i = 0; i < 100; i++) {
                var dataPhoto = data.photos[i];
                var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
                var marker = new google.maps.Marker({
                    position: latLng
                });
                markers.push(marker);
            }
            var markerCluster = new MarkerClusterer(map2, markers);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <div id="map"></div>



</asp:Content>

But when I change the DIV ID for map2 and lookup for map2 in the javascript, the map is no longer displayed. Any idea why? If I want to put more than one map and it does not accept any other ID than “map”, what is the option???



 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD1wOf9ISBejnZhC-umNwWdaQbuSk3mMwg&sensor=false">    </script>
<script src="Scripts/markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/data.json"></script>

    <script type="text/javascript">
        var script = '<script type="text/javascript" src="Scripts/markerclusterer';
        if (document.location.search.indexOf('compiled') !== -1) {
            script += '_packed';
        }
        script += '.js"><' + '/script>';
        document.write(script);
    </script>

    <script type="text/javascript">
        function initialize() {
            var center = new google.maps.LatLng(37.4419, -122.1419);

            var map2 = new google.maps.Map(document.getElementById('map2'), {
                zoom: 3,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var markers = [];
            for (var i = 0; i < 100; i++) {
                var dataPhoto = data.photos[i];
                var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
                var marker = new google.maps.Marker({
                    position: latLng
                });
                markers.push(marker);
            }
            var markerCluster = new MarkerClusterer(map2, markers);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <div id="map2"></div>



</asp:Content>

thanks

4

What does your HTML look like once it’s generated?

5

WIth ID= map, just like the demo presneted at : http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

With ID= map2, the body (MainContent) is empty.

6

I mean the HTML of the whole page. What you gave is ASP.NET code, not HTML. It’s likely the HTML isn’t generating how you expect or something, so the Javascript can’t work properly.

7

Won’t running two maps at the same time cause a Javascript conflict? [B][U]Let me google that for you[/U][/B] :wink:

8

shame on me! I did not apply any style to the new DIV and the map was not rendered. Sorry wasted your time.

regards,