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

<script src=".exp"></script>
<script src="?   
  v=3.exp&sensor=false&libraries=places"></script>
  <script>
var geocoder;
var map;
function initialize() {

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

ponentRestrictions: {country: "in"}
};
var autoplete = new google.maps.places.Autoplete(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.

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./maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis./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 = {

ponentRestrictions: {country: "in"}
};
var autoplete = new google.maps.places.Autoplete(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.

• javascript
• wordpress
• google-maps
• google-maps-api-3

• Remove the first line <script src="maps.googleapis./maps/api/js?v=3.exp"></script> – Chakravarthy S M Commented Aug 5, 2014 at 10:21
• I have tried that already but map doesnt show properties – Kedar B Commented Aug 5, 2014 at 10:22
• Keep the first line, try removing the second script import i.e.. <script src="maps.googleapis./maps/api/js? v=3.exp&sensor=false&libraries=places"></script> – Chakravarthy S M Commented Aug 5, 2014 at 10:23
• I alredy tried that...but no luck... – Kedar B Commented Aug 5, 2014 at 10:25
• I tested in local, if any one of the first two script tags are removed, that error won't show up, you check again, it will work – Chakravarthy S M Commented Aug 5, 2014 at 10:29

3 Answers 3

Remove the first line:

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

You are including the Google Maps API twice.

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./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>

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.