Google Map API v3 not working in WordPress

1 Views

Hi this script shows a Google’s map in Palo Alto, CA.
When i use it in a simple .html page it works perfectly, but when i include it in a WordPress page it doesn’t show up.

What am i missing?
thanks 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
html,body,#bb_map { height: 100%; width:100%;} 
#map-canvas { height: 100%; width:100%;} 
</style>
</head>
<body>
<div id="bb_map"> 
<p>Visit a Diner Near You</p> 
    <div id="map-canvas"></div> 
</div> 
</div>     
</body>
</html>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. I would rather using jquery in my wordpress for googlemaps api, you can try it if you want.

    like this code snippet :

    $(document).ready(function () {
    var infowindow = new google.maps.InfoWindow();
    var bi = new google.maps.LatLng(-6.182134, 106.821825);
    var mapOptions = {
        center: new google.maps.LatLng(-2.548926, 118.0148634),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var marker = new google.maps.Marker({
        map: map,
        postion: bi,
        title: 'Bank Indonesia',
        animation: google.maps.Animation.BOUNCE
    });
    
    marker.setPosition(bi);
    
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas" style="width:450px; height:300px"></div>

    Check this how you use jquery in wordpress.
    Or you can use the way he use google maps api in wordpress here.

    you can place your initialize in body tag like this below :

    <body onload="initialize()">

    for google maps api using pure javascript.