How do you generate more than one Google map
Question
I have been trying to get two(need three) Google maps to work on my project.
I have got the first one working with this;
<div class="map" id="map"></div>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
Now when I try to get a second one working it just doesn't work. I have tried to find other solutions but to no luck.
These two other maps are on a different page than this one above.
From looking at some stuff could it be as simple as below? I have tried things similar to this with no luck as well.
<div class="map" id="map"></div>
<div class="map" id="map__2"></div>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var marker_SecondMap = new google.maps.Marker({
position: uluru,
map: map
});
}
I think I might be making this way harder than it needs to be, but I have found it strange that Google themselves don't have an example(they might do I just haven't seen it) for this.
Thanks for the help.
2 answers
solution1
1 ACCPTED 2018-04-29 20:07:24
Be sure you have proper width and heigth for the two div
and be sure you have an event for trigger the initMap() exacuption
and be sure that the two maps use the related map object map and map_SecondMap
<div class="map" id="map" style='height: 300px; width:300px'></div>
<div class="map" id="map2" style='height: 300px; width:300px'></div>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map2'), {
zoom: 4,
center: uluru_SecondMap
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var marker_SecondMap = new google.maps.Marker({
position: uluru_SecondMap,
map: map_SecondMap
});
}
google.maps.event.addDomListener(window, 'load', initMap);
solution2
1 2018-04-29 20:07:41
I'm not sure what you are doing wrong. I was able to use your code almost as is to get two maps on the same page. Two things I changed:
- I made sure both
divshad dimensions - I changed you second marker to be applied to
map_SecondMap
Here's the entire HTML that works,just in case you see something that's different than yours:
<html>
<head>
<style>
.map{
width: 300px;
height: 300px;
margin: 50px;
}
</style>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"
type="text/javascript"></script>
</head>
<body>
<div class="map" id="map"></div>
<div class="map" id="map__2"></div>
<script>
function initMap() {
var uluru = {lat: 54.5973, lng: -5.9301};
var uluru_SecondMap = {lat: 54.5973, lng: -5.9301};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var map_SecondMap = new google.maps.Map(document.getElementById('map__2'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var marker_SecondMap = new google.maps.Marker({
position: uluru,
map: map_SecondMap
});
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.