admin管理员组

文章数量:1026989

I have two maps that I am trying to show on one page, one for element id= mapall, the other for id=mapall2.

Both have multiple markers on them that are provided in arrays (var =markers and var = markers2). At the moment both maps show on the page, but only one of them at a time shows the markers and has the map controls (zoom, full screen). If I refresh the page, then the other map has all of its markers and the other doesn't. How do I get both maps to load simultaneously?

First Map:

<script>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers.length; i++ ) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

second map:

<script>
<?php
echo "var markers2=$markers2;\n";
?>
function initMap2() {
var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall2'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers2.length; i++ ) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

<script async defer
    src=";callback=initMap">
 </script>
<script async defer
    src=";callback=initMap2">
 </script>

and this is what they currently look like (the map on the right should also have markers, provided by markers2:

I have two maps that I am trying to show on one page, one for element id= mapall, the other for id=mapall2.

Both have multiple markers on them that are provided in arrays (var =markers and var = markers2). At the moment both maps show on the page, but only one of them at a time shows the markers and has the map controls (zoom, full screen). If I refresh the page, then the other map has all of its markers and the other doesn't. How do I get both maps to load simultaneously?

First Map:

<script>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers.length; i++ ) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

second map:

<script>
<?php
echo "var markers2=$markers2;\n";
?>
function initMap2() {
var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall2'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers2.length; i++ ) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

<script async defer
    src="https://maps.googleapis./maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap">
 </script>
<script async defer
    src="https://maps.googleapis./maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap2">
 </script>

and this is what they currently look like (the map on the right should also have markers, provided by markers2:

  • javascript
  • google-maps
  • google-maps-api-3
Share Improve this question asked Oct 8, 2017 at 12:33 warrenfitzhenrywarrenfitzhenry 2,29911 gold badges36 silver badges60 bronze badges 1
  • stackoverflow./questions/4074520/… may be this will help you? – Aram Gevorgyan Commented Oct 8, 2017 at 12:40
Add a ment  | 

1 Answer 1

Reset to default 4

You are including the API twice. That generates the warning:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors

Only include the API one time, put the initialization code for both maps inside a single initialization function.

One option:

<script>
function initialize() {
  initMap();
  initMap2();
}
</script>
<script async defer
  src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>

proof of concept fiddle

code snippet:

var markers = [{
  GPS1: -34.031342,
  GPS2: 18.577419,
  client_address: "somewhere1"
}];

function initialize() {
  initMap();
  initMap2();
}

function initMap() {
  var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers.length; i++) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}
var markers2 = [{
  GPS1: -33.92465,
  GPS2: 18.84382,
  client_address: "somewhere2"
}];

function initMap2() {
  var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall2'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers2.length; i++) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#mapall,
#mapall2 {
  height: 50%;
  width: 100%;
  border: red solid 1px;
}
<div id="mapall"></div>
<div id="mapall2"></div>
<script async defer src="https://maps.googleapis./maps/api/js?callback=initialize">
</script>

I have two maps that I am trying to show on one page, one for element id= mapall, the other for id=mapall2.

Both have multiple markers on them that are provided in arrays (var =markers and var = markers2). At the moment both maps show on the page, but only one of them at a time shows the markers and has the map controls (zoom, full screen). If I refresh the page, then the other map has all of its markers and the other doesn't. How do I get both maps to load simultaneously?

First Map:

<script>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers.length; i++ ) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

second map:

<script>
<?php
echo "var markers2=$markers2;\n";
?>
function initMap2() {
var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall2'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers2.length; i++ ) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

<script async defer
    src=";callback=initMap">
 </script>
<script async defer
    src=";callback=initMap2">
 </script>

and this is what they currently look like (the map on the right should also have markers, provided by markers2:

I have two maps that I am trying to show on one page, one for element id= mapall, the other for id=mapall2.

Both have multiple markers on them that are provided in arrays (var =markers and var = markers2). At the moment both maps show on the page, but only one of them at a time shows the markers and has the map controls (zoom, full screen). If I refresh the page, then the other map has all of its markers and the other doesn't. How do I get both maps to load simultaneously?

First Map:

<script>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers.length; i++ ) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

second map:

<script>
<?php
echo "var markers2=$markers2;\n";
?>
function initMap2() {
var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
};

var map = new google.maps.Map(document.getElementById('mapall2'),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

for( i = 0; i < markers2.length; i++ ) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lng),
        name:name,
        map: map
    }); 
    google.maps.event.addListener( marker, 'click', function(e){
        infowindow.setContent( this.name );
        infowindow.open( map, this );
    }.bind( marker ) );
}
}

</script>

<script async defer
    src="https://maps.googleapis./maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap">
 </script>
<script async defer
    src="https://maps.googleapis./maps/api/js?key=AIzaSyANS0uqM7qedfDCzPjJ3xoB15vh2DC4Tls&callback=initMap2">
 </script>

and this is what they currently look like (the map on the right should also have markers, provided by markers2:

  • javascript
  • google-maps
  • google-maps-api-3
Share Improve this question asked Oct 8, 2017 at 12:33 warrenfitzhenrywarrenfitzhenry 2,29911 gold badges36 silver badges60 bronze badges 1
  • stackoverflow./questions/4074520/… may be this will help you? – Aram Gevorgyan Commented Oct 8, 2017 at 12:40
Add a ment  | 

1 Answer 1

Reset to default 4

You are including the API twice. That generates the warning:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors

Only include the API one time, put the initialization code for both maps inside a single initialization function.

One option:

<script>
function initialize() {
  initMap();
  initMap2();
}
</script>
<script async defer
  src="https://maps.googleapis./maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>

proof of concept fiddle

code snippet:

var markers = [{
  GPS1: -34.031342,
  GPS2: 18.577419,
  client_address: "somewhere1"
}];

function initialize() {
  initMap();
  initMap2();
}

function initMap() {
  var latlng = new google.maps.LatLng(-34.031342, 18.577419); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers.length; i++) {
    lat = (markers[i].GPS1);
    lng = (markers[i].GPS2);
    name = (markers[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}
var markers2 = [{
  GPS1: -33.92465,
  GPS2: 18.84382,
  client_address: "somewhere2"
}];

function initMap2() {
  var latlng = new google.maps.LatLng(-33.92465, 18.84382); // default location
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: true
  };

  var map = new google.maps.Map(document.getElementById('mapall2'), myOptions);
  var infowindow = new google.maps.InfoWindow(),
    marker, lat, lng;

  for (i = 0; i < markers2.length; i++) {
    lat = (markers2[i].GPS1);
    lng = (markers2[i].GPS2);
    name = (markers2[i].client_address);

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      name: name,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(this.name);
      infowindow.open(map, this);
    }.bind(marker));
  }
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#mapall,
#mapall2 {
  height: 50%;
  width: 100%;
  border: red solid 1px;
}
<div id="mapall"></div>
<div id="mapall2"></div>
<script async defer src="https://maps.googleapis./maps/api/js?callback=initialize">
</script>

本文标签： javascriptTwo Google Maps on same page with markersStack Overflow

版权声明：本文标题：javascript - Two Google Maps on same page with markers - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745668243a2162300.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。