Multiple Google Maps on one page

Hi all,
my aim is to have multiple Google Maps, each with 2 markers, 2 info windows and a polyline on a  single page.
One map on the page is no problem however creating more than 1 is giving me a little trouble..
http://beaconhilldesign.co.nz/~talofaairways/test.html
Cheers,
N
LVL 5
Neil_BradleyWeb UX/UI DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There should be no issue with multiple maps.  Just make sure your id's are unique.

<div id="map-canvas"....

<div id="map-canvas2"....
0
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Hi Scott,
my aim is to have 2 different maps so adding another div with a new id is only part of the solution. I need to create a whole second code block containing my new map data. This is where I am getting a little stuck.
Cheers,
N
0
Rainer JeschorCommented:
Hi,
the quick n dirty way would be to simply clone the configuration elements.
I added also standard HTML elements which are missing in your test page:
<!DOCTYPE HTML>
<html>
	<head>
		<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript"> 
			//<![CDATA[
			//initialise the infowindow so it's ready for use
			var infowindow = null;
			//function to actually initialise the map
			function initialize(condition) 
			{
				//zoom and set the default map type to RoadMap
				var latlng = new google.maps.LatLng(-15.972552,-172.221686);
				var latlng2 = new google.maps.LatLng(19.896766,-155.582782);
				var myOptions = {
					zoom: 6,
					scrollwheel: false,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}; 
				
				var myOptions2 = {
					zoom: 6,
					scrollwheel: false,
					center: latlng2,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				//place the map on the canvas
				var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
				var map2 = new google.maps.Map(document.getElementById("map-canvas2"), myOptions2);
				//Set all your markers, the magic happens in another function - setMarkers(map, markers) which gets called
				setMarkers(map, items);
				setMarkers(map2, items2);
				infowindow = new google.maps.InfoWindow({
					content: "holding..."
				});
			}  
			
			var items = [		 
				['Location1', -14.331389, -170.711389, 1, '<div class="scrollFix"><p><strong>Loc 1<\/strong></p><\/div>'],
				['Location 2', -13.849237 , -171.740071, 1, '<div class="scrollFix"><p><strong>Loc 2<\/strong></p><\/div>']
			];
    
			var items2 = [		 
				['Location21', 21.324513, -157.925074, 1, '<div class="scrollFix"><p><strong>Honolulu Airport<\/strong></p><\/div>'],
				['Location22', 20.894740 , -156.435614, 1, '<div class="scrollFix"><p><strong>Kahului Airport<\/strong></p><\/div>']
			];
			//function to actually put the markers on the map
			function setMarkers(map, markers) 
			{
				//loop through and place markers
				for (var i = 0; i < markers.length; i++) 
				{
					var sites = markers[i];
					var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
					var marker = new google.maps.Marker({
						position: siteLatLng,
						map: map,
						title: sites[0],
						zIndex: sites[3],
						html: sites[4]
					});

					//initial content string
					var contentString = "Some content";

					//attach infowindow on click
					google.maps.event.addListener(marker, "click", function () 
					{
						infowindow.setContent(this.html);
						infowindow.open(map, this);
					});
				}
		
				var FlightRoute74 = [
					new google.maps.LatLng(-14.331389, -170.711389),
					new google.maps.LatLng(-13.849237 , -171.740071)];
				var geodesicRoute74  = new google.maps.Polyline({
					path: FlightRoute74 ,
					geodesic: true, 
					strokeColor: "#e48311",
					strokeOpacity: 1.0,
					strokeWeight: 2
				});
				geodesicRoute74 .setMap(map);
			}
		</script>
	</head>
	<body>
		<div id="map-canvas" style="width: 100%; height: 500px;"> </div>
		<div id="map-canvas2" style="width: 100%; height: 500px;"> </div>
		<script type="text/javascript">// <![CDATA[
			initialize();
		// ]]></script>
	</body>
</html>

Open in new window


HTH
Rainer
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Looking good.
Any thoughts on how to add a new polyline to the second map?
I thought that by adding another block of coordinates and changing geodesicRoute74 .setMap(map); to geodesicRoute74 .setMap(map2); would work but no luck.
Cheers,
Neil
0
Rainer JeschorCommented:
Hi,
as the setMarkers function is called by both maps, you have to generalize the way how you create the flight route.
Fortunately the two markers have all necessary information:
				var FlightRoute74 = [
					new google.maps.LatLng(markers[0][1], markers[0][2]),
					new google.maps.LatLng(markers[1][1], markers[1][2])];
				var geodesicRoute74  = new google.maps.Polyline({
					path: FlightRoute74 ,
					geodesic: true, 
					strokeColor: "#e48311",
					strokeOpacity: 1.0,
					strokeWeight: 2
				});
				geodesicRoute74.setMap(map);

Open in new window

So instead of hard coding the two geo locations, just use the provided parameter:
markers[0][1] and markers[0][2]

One limitation of this: this will only work when passing the two route endpoints as the first two marker items.

HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil_BradleyWeb UX/UI DeveloperAuthor Commented:
Thanks for that. I have adapted your answer a little however the end result is exactly what I needed.
Cheers,
N
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.