Develop Reference

Googlemap loading issue in div

I am trying to load googlemap inside div. My script is as follows
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyAiy_9XkvL8a5-zsSV5jFpH8sHcth5HkpE&callback=myMap"></script>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(19.015509, 72.843067),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
And on the loading of page I am getting error. I have attached an image of error.

I do not know exactly where you're wrong.
But by the error you get.
The function is not set correctly.
Or that it is not within the local scope.
But you should view a map of Google.
If an address you want.
There's another way to get this into your code.
Just enter Google Maps and select correspondence and just paste it into the code.
I attach an example that you can understand.
What I mean exactly.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2702.5938589941825!2d8.640130883976095!3d47.36132677916924!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479aa3ffb7057dbb%3A0x8dfd514b03a2c801!2sBodenacherstrasse+52%2C+8121+F%C3%A4llanden!5e0!3m2!1siw!2sch!4v1505149050010" frameborder="0" style="border:0" allowfullscreen></iframe>

Move you script myMap() before the googleapis call
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(19.015509, 72.843067),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyAiy_9XkvL8a5-zsSV5jFpH8sHcth5HkpE&callback=myMap"></script>

You have your scripts in the wrong order. You are loading the Google Maps Javascript API v3 without the defer async tags, so when it finishes loading (inline), it will attempt to call the function myMap, which is defined (inline) after the script include. Reverse the order.
proof of concept:
fiddle with original order
error: Uncaught Vb {message: "myMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Vb (https://maps.googleapis.com/m….googleapis.com/maps/api/js?callback=myMap:144:59"}
fiddle with reordered code
(no errors, loads map)
working code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="map"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(19.015509, 72.843067),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Google uses initMap as default function so use initMap() instead of myMap()
Try this:
function initMap() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(19.015509, 72.843067),
scrollwheel: false
};

Google Maps Marker Pin Not Showing

I have an issue with the Google Maps widget where the marker is not showing on my live site but is showing when I put the code into Codepen.
Codepen:
http://codepen.io/anon/pen/LxLprp
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2X6alsV0XdrvNoB4HCEBxNn9VgQYniII"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(51.632566, -0.175259),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: {lat: 51.632566, lng: -0.175259},
map: map,
title: 'Test'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map" style="height: 300px; width: 300px"></div>
Live Site:
Would anybody possibly know what could be the issue here? The console does not show any errors.
Thank you.

#pix-fe .global-html .html-content * {
max-width: 100%;
}
Remove this CSS rule from your page and it will work...
If you are trying to hide certain features from the map, don't do it with CSS. Do it with the map options.

Google Map on Bootstrap Modal is grey - resizing the window makes it appear

I run this function after the page has loaded but no map displayed, just a grey square with the google logo and terms of use button at the bottom:
initMap() {
var area = new google.maps.LatLngBounds(
new google.maps.LatLng(-47.746617, 165.346753),
new google.maps.LatLng(-33.670946, -179.667808)
);
var options = {
bounds: area,
zoom: 13
};
//this.autocomplete = new google.maps.places.Autocomplete(<HTMLInputElement>this.areaInput.areaInput.nativeElement, options);
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13
});
google.maps.event.trigger(map, "resize");
}
html:
<div id="map"></div>
css:
#map {
height: 300px;
overflow: visible;
width:100%
}
#map * {
overflow: visible;
}
Why is the map just a grey square?
EDIT - When I resize the window, the map appears. Why is this?
How do I make it appear without needing to resize the window?
The map is on a bootstrap modal. The user has to click something to make the modal appear. The map appears but is grey with no actual map until resizing the window manually with the mouse.
EDIT: it is to do with timing. If i hook a button up to resize the map it works when clicking the button.

maybe somebody can benefit from this answer after almost one year :). i had the same problem and i solved it like this:
in the initMap function, i triggered the resize
function initMap() {
var myCenter = new google.maps.LatLng(20.296100, 85.824500);
var mapProp = { center: myCenter, zoom: 12, scrollwheel: false, draggable: true, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({ position: myCenter });
marker.setMap(map);
$('a[href="#apartmentInfo"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(mapProp.center);
});
};

You have an error in the div (#map) and you should set a proper size for you div
<div id="map" style='width: 400px; height: 400px;'></div>
You have missed a ;
#map {
height: 300px;
overflow: visible;
width:100%; /* here */
}
#map * {
overflow: visible;
}

Ended up being because it was on a bootstrap modal. Needed to hook into the bootstrap modal lifecycle event "shown" to make sure it was fully loaded. Wasn't expecting the modal to be a factor because I've done it on a modal in the past without the issue.
$('#result-details-modal').on('shown.bs.modal', (e) => {
this.resizeMap();
})
resizeMap() {
var map = new google.maps.Map(document.getElementById('map'), this.options);
google.maps.event.trigger(map, "resize");
}

Google Maps API on Squarespace

I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.
I've followed steps as below :
What I'm trying to archive is just to show a google map on my web.
Step 1: Insert a embed block for html
<div id="map_canvas"></div>
Step 2: insert javascript in page header
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section
#map_canvas
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
But the codes I put on Squarespace didn't work. How should I do?
Here the link to my webpage on SquareSpace
Your Site Title
Thanks!!

LoL, u put the script at a very wrong place i think.
1st. put your script, all of it after </body>
2nd. you need a cover for your maps <div> like a wrapper or so to put it in center. and using a cover/wrapper div you can manipulate the size and the shape.
3rd. i don't know id="maps_canvas". because from google i got this <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, it was gmap_canvas. and put style in it to make them fit with your cover/wrapper div.
easier way: http://embedgooglemaps.com/en/
perhaps it'll help. :)

This is what I changed in my code as below :
Step 1: Insert a code block for html <-- it was not embed block, but code block. I mistyped before.
<div id="mapWrapper">
<div id='gmap_canvas' style='height:100%;width:100%; position:static'>
</div>
</div>
Step 2: insert javascript in page header.
I change only ID name from 'map_canvas' to 'gmap_canvas'
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section.
Changed ID name from 'map_canvas' to 'mapWrapper', then set another size.
#mapWrapper
{
width: 750px;
height: 500px;
margin: 0px;
padding: 0px
}
I tried to put most of everything people advised me, but still the map doesn't come up on my site.
Is there something wrong yet?

I did the same thing with my site.
What I did differently is not put my #map-canvas within a wrapper. While previewing your site, are you able to find your gmap_canvas with the inspect view? It may be that the content is there, just not displaying properly.
My code:
The following is in the page header code injection box. Note that a large bit of this code (and I don't remember which parts since I don't know JS) is just to keep the pin centered on different screen sizes.
<style type="text/css">
html, body, #map-canvas {
height: 400px;
width 960px;
margin: 0;
padding: 0;}
#banner-area-wrapper {
display: none;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
</script>
<script type="text/javascript">
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
function initialize() {
var myLatLng = {lat: 39.910073, lng: -82.965509};
var mapOptions = {
center: myLatLng,
zoom: 14,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_CENTER},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Opportunity Center'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
On the page, I have a code block, with the following in it:
<div id="map-canvas" style="width:90%;margin:auto;"></div>
Note that I did not put my #map-canvas inside a wrapper, nor include anything in the custom CSS.
I made a quick dummy site, and replicated your failure to show the map, but I don't know quite enough about Squarespace to say exactly why. I'd start with copying my code and see if that works for you - seems like the big difference is your wrapper around the canvas.

Google Maps - Setting Countries to a Color and if I click on it links to a page

I want to set particular countries to a certain color and then if the user clicks on it, it will open a small window with some text/links.
Below is the code I have until now:
<style>
#map_canvas {
width: 100%;
height: 500px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(22.6006017, -3.845206),
zoom: 2,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
google.maps.event.addListener(map, 'click', function(event){
this.setOptions({scrollwheel:true});
});
google.maps.event.addListener(map, 'mouseout', function(event){
this.setOptions({scrollwheel:false});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
</div>

In v3 Google maps API consider using the KML style override example in the SO conversation below.
How to override KML colors in Google Map?