Google Map API v3 not working in Wordpress
Question
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>
1 answers
solution1
0 2015-02-04 01:20:30
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.
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.