CODEWITHSUNDEEP
javascriptwordpressgoogle-mapsgoogle-maps-api-3
Kedar B
Kedar B

Reputation: 784

You have included the Google Maps API multiple times on this page

I m using google map api v3. I m using wpestate real estate wordpress theme. This is my code in template file..

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js?   
  v=3.exp&sensor=false&libraries=places"></script>
  <script>
var geocoder;
var map;
function initialize() {

var input = document.getElementById('address');
var options = {

componentRestrictions: {country: "in"}
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
geocoder = new google.maps.Geocoder();


//var latlng = new google.maps.LatLng(18.52043030000, 73.85674369999);

var mapOptions = {
 zoom: 15,
//center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,

}

var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

}



function codeAddress() {
 var address = document.getElementById('address').value;


 geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {

 map.setCenter(results[0].geometry.location);
  var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
  });
  } else {
  alert('Geocode was not successful for the following reason: ' + status);
  }
 });
}


 google.maps.event.addDomListener(window, 'load', initialize);
 </script>

It is runnig as expected but it gives error in console "You have included the Google Maps API multiple times on this page. This may cause unexpected errors.". Because of that map doesn't show properties on map.

Upvotes: 6

Views: 60035

Answers (3)

Владимир Рак
Владимир Рак

Reputation: 73

In my case I inserted link to the library twice, in the top page and before div. I delete any link and it's will work. You check links in your page.

Upvotes: 0

user2543382
user2543382

Reputation:

Your problem is that, like others have found out, the duplicate script of the Google Maps. Please check the link below for working code.

http://jsbin.com/husahasu/1/edit

To render the map you need to specify its centre. It will not render without it. You also need to add css for your elements. Put this in the head of the document.

<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0; padding: 0 }
 #googleMap { height: 100% }
</style>

Upvotes: 0

Mike
Mike

Reputation: 8877

Remove the first line:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

You are including the Google Maps API twice.

Upvotes: 6

Related Questions