Can I Load Two Google Maps in API Keys?
If you use Google's sample JavaScript code and your Google Maps API key to place a map on a Web page, you know that the sample code creates a single map. This is fine when you only have one location to display, but you may wish to show site visitors an additional view. You can do that by making a few quick changes to the HTML code that generates your Google map.
Other People Are Reading
-
Adding One Map
-
It doesn't take much code to place a Google map on a Web page. The complex coding required to generate a map exists in the external JavaScript that you link to from your code as shown below:
src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
After creating a new JavaScript object, you can populate it with a few properties such as zoom that customize the map. Generate the map by calling the MAP function as shown in this example:
var map1 = new google.maps.Map(document.getElementById("div1"),
This code creates a variable named map1 and passes it the ID the div that displays the map.
Adding Two Maps
-
Add a second map by cloning some of the code used to create the first map. Suppose your JavaScript object appeared as shown below:
var mapObject = {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: Lat_Long,
zoom: 9,
};This object named mapObject contains properties that define the type of map you wish to display, the coordinates of the location you want to appear and the map's zoom level. If you copy that code and paste it into your document, you can change the copied object's name to mapObject2. Make the second map appear by cloning the statement that calls the Map function and changing the name of the copied object from map1 to map2. You must also change the getElementById's argument from div1 to the name of the div that displays the second map.
-
Style Sheet Modifications:
-
You don't need complex Cascading Style Sheet code to place a Google map your Web page. You can define a simple class that defines the width and height properties of your div elements as shown below:
.mapStyle1 { height: 100px; width: 200px; }
This code creates a class named mapStyle1 which both divs can reference. Each div's height and width will be 100 pixels and 200 pixels. Increasing those values makes your maps bigger. If you make them too large, users must scroll to view the maps.
Considerations
-
If you'd like your second map to have a different size, create another class containing different height and width values and assign it to your second div. Create an interesting dual-view effect by making one large map that shows a location and placing a much smaller map next to it that shows a closer view of the same location. You could even have one map show a satellite view and the other one display a view of the terrain. Add as many Google maps as you like to a page using these coding techniques.
-
References
Resources
- Photo Credit Digital Vision./Digital Vision/Getty Images
