Google Map API v3 not working in Wordpress - javascript

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>


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.

Related

Set Icon Type by Button Click with Google Maps API3

I'm trying to make a simple interactive map that will allow the user to select a marker type from a button outside the map, then place a single marker when the user clicks on the map. After the marker is dropped the user could reposition the map or select another marker type to add. I realize this is a pretty basic question but I just started learning. An example would be much appreciated as I am still learning the terminology. Thanks!
Here is what I have so far.
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>Simple SITTEMP</title>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=drawing" async defer>
</script>
</head>
<body onload="initialize()" style="height:100%">
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(45.401942, -110.663985);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
};
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
});
}
</script>
<div id="map_canvas" style="width:50%; height:50%;"></div>
<button id= "blueButton"> Add Blue Marker</button>
<button id= "redButton"> Add Red Marker</button>
</body>
</html>

Here a simple One:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>Simple SITTEMP</title>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTQxCH5Vw9ot8amZ-3dG66_joi2mzpJqI&callback=initMap&libraries=drawing" async defer>
</script>
</head>
<body onload="initialize()" style="height:100%">
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(45.401942, -110.663985);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
var markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png';
function setMarkerIconColor(color){
if (color == "blue") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'};
if (color == "red") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'};
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon: markerIcon,
map: map,
draggable: true,
});
}
</script>
<div id="map_canvas" style="width:50%; height:50%;"></div>
<button id= "blueButton" onclick="setMarkerIconColor('blue')"> Add blue Marker </button>
<button id= "redButton" onclick="setMarkerIconColor('red')"> Add Red Marker</button>
</body>
</html>

Google maps shows up Grey, but works when resizing the browser

Hej. Google maps turns up grey in the browser, but can see the markers and the google logo in the bottom right corner.
Have tried the resize function, but still won't work.I am using bootstraps col.
I can see it works here, but it doesn't.
Thanks for the help.
function initialize() {
var myOrigin = new google.maps.LatLng(56.63914, 9.79765);
var mapProp = {
center: myOrigin,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var myCenter = new google.maps.LatLng(56.157165, 10.207644);
var marker = new google.maps.Marker({
position: myCenter,
title: 'Click to zoom'
});
marker.setMap(map);
var myCenter2 = new google.maps.LatLng(57.04661, 9.924479);
var marker2 = new google.maps.Marker({
position: myCenter2,
title: 'Click to zoom'
});
marker2.setMap(map);
/*On marker click, it zooms to 19*/
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(19);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker2, 'click', function () {
map.setZoom(19);
map.setCenter(marker2.getposition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#googleMap {
height:350px;
width:100%;
}
<body>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="googleMap"></div>
</div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</body>

If you check the Getting Started for JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
NOTE:
If you're using the API under the standard plan, you must use a browser key (a type of API key) set up in a project of your choice. See more about API keys for the standard API.

Load Google Maps in HTML page when button is clicked

I have an HTML page with a list of buttons representing locations. When any button is clicked, I want a Google Map to appear with that location. Should the map open on a new HTML page? (because the map should take up the full page), or is it possible to display the map on the same page?
EDIT - OK, I want to open it in another HTML file. I have an external JS file which has the following Map code:
function initialize(lat, lng) {
var mapOptions = {
center: {lat: parseFloat(lat), lng: parseFloat(lng)},
zoom: 8,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));
My external HTML file is given below:
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js" ></script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But its not working. The external JS file cannot locate "map-canvas", it seems. Can anyone tell me how to fix this? (script.js is the external JS file)

I worked around your question try this :
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
</head>
<body>
<div>
Show Map1
</div>
<div>
Show Map2
</div>
<div>
<a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019" targe> Show Map3 </a>
</div>
<script>
var render_map = function( lat, lng, title ) {
var mapCanvas = document.getElementById('map-canvas');
// options
var args = {
zoom : 16,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map( mapCanvas, args);
// create marker
var marker = new google.maps.Marker({
position: args.center,
map: map,
title: title
});
toggleMap();
}
var toggleMap = function(){
if ($('body').hasClass('-show-map')) {
mapHide();
} else {
mapShow();
};
}
$('.map-trigger').on('click', function(event) {
event.preventDefault();
var lat = $(this).data('lat');
var lng = $(this).data('lng');
render_map(lat, lng);
});
</script>
<div id="map-canvas"></div>
</body>
</html>

Custom Google Map won't show in div element

I'm trying to customize google map but I have a small problem.
Here is the css code:
#map-canvas {
width: 100%;
height: 500px;
}
and the js code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And this is how I initialize the map in html. This example actually works.
<div id="map-canvas"></div>
But when I trying to put my map into some div e.g:
<div>
<div id="map-canvas"></div>
</div>
It doesn't work. How to fix that ?
/// EDIT
Please put this into example.html and try to run. Nothing happens for me.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<div id="map-canvas"></div>
</div>
</body>
</html>

Your parent div should have height and width defined.
<body>
<div style="height:100%; width:100%;">
<div id="map-canvas"></div>
</div>
</body>
Try This.
For more detail:
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag

Nothing seems wrong in your code ,it works fine just seprated css.I have checked and tested.
DEMO

Google Map API v3 is not appearing [duplicate]

This question already has answers here:
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
(8 answers)
Closed 9 years ago.
I can't get my Google map to appear in any browser. I even tried copying mostly the sample code below from Google's example and build off of that, but I can't even get that to appear. Any ideas what could be wrong below? NOTE: I actually DO put my API key where I have "I PUT MY KEY IN HERE". :)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=I PUT MY KEY IN HERE&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>
#map-canvas { height: 100%}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&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>
#map-canvas { width : 100%;
height : 300px;
border: solid thin #333;
margin-top: 20px;}
</style>
</head>
<body>
<div id="bb_map">
<p>Visit a Diner Near You</p>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>

You dont need a key in V3 of this API :)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 500px;
width: 500px;
}
</style>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My Place!'
});
}
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>

Your map doesn't have a size so you can't see it
<div id="map-canvas" style="height:500px; width:600px"></div>
You also are not including the API script (I get an error "google is not defined" in the javascript console), this works for me locally:
<!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>
working example

Categories

Resources