Custom Google Map won't show in div element

Custom Google Map won't show in div element - javascript

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

Related

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>

Google Map API v3 not working in Wordpress

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.

Display the HTML panel next to infowindow on Google Map

I'm developing the Google Map web application using Google Map 3 library, I want to add the HTML panel when I click on button on infowindow. The panel position always beside the infowindow. Can everyone help me or give me an example to resolve it?
It looks like this:
For example I have some code, could I display the div #panel on the right of the div #content?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
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 contentString = '<div id="content">'+
'<div id="btn_know_more"> Know more'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel">
<!--Content panel-->
</div>
</body>
</html>

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

Develop Reference

JavaScript is the programming language of the Web.

Custom Google Map won't show in div element - javascript

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

Related

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

Load Google Maps in HTML page when button is clicked

Google Map API v3 not working in Wordpress

Display the HTML panel next to infowindow on Google Map

Google Map API v3 is not appearing [duplicate]

Categories

Resources