Develop Reference

Google maps displaying jibberish

my map is not rendering correctly.
I have never experienced this yet (notice the icons on the right buttons being distorted). The code used to generate the map is extremely simple:
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 43.828430, lng: 18.3445995},
zoom: 18
});
new google.maps.Marker({
position: {lat: 43.828430, lng: 18.3445995},
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9zhNUfid1PgR6FZ-g8xTp_NCqV3JvsHM&callback=initMap" async defer></script>
Any ideas?

Idk why, but when I tried your code, it worked but the map was also gray. When I pointed style="width:500px;height:500px" map become working

Okay so the problem was that I had a bad CSS rule that was interfering with google's rendering.
For reference it was 100% max width on img.

Google maps js api. Many maps on page

I have accordion (twitter-bootstrap), and on each I have a map.
Accordion blocks generates in foreach. Maps generates as partial view, that takes model with latitude and longitude and block id.
It calls in foreach:
#if (item.Latitude != null)
{
<p>Map:</p>
<div class="map-margin">
#{Html.RenderAction("Map", "Default", new {model = item});}
</div>
}
And action returns this partial view:
#model MPS.Administration.Models.ReportModel
<div id="map-canvas-#Model.Id.ToString()" style="width: 470px; height: 270px;"></div>
<script type="text/javascript">
$('#map-canvas-#Model.Id').ready(function() {
initialize();
});
function initialize() {
var lat = #Model.Latitude;
var lng = #Model.Longitude;
var latlng = new google.maps.LatLng(#Model.Latitude, #Model.Longitude);
debugger;
var mapOptions = {
center: latlng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var name = 'map-canvas-' + #Model.Id.ToString();
var map = new google.maps.Map(document.getElementById(name),mapOptions);
debugger;
// create a marker
var image = '../Content/Images/map_icon.png';
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
}
</script>
On layout I included script for js api.
Now I have 4 blocks, but only the last have map block (and it have only google logo and gray background without the map :( ). In debugger I see that lat and lng is same all 4 times. I think the problem is how I call initialize() map. Please help me to solve this issue.

The map si show only in the visible div. For the other you shuuld see only a grey background and in some case a small portion of the map in the upper left corner.
For see the map in every block you should use map.resize() or better use a genaration function for each time you show a new map. Initialize tipcally is call only when the windows is created and this this case the maps not visible fails

Google Maps Javascript section causing text to become bold

Here is the code that affects it:
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(51.4893169, -2.1182648);
var mapOptions = {
center: latLng,
zoom: 15,
scrollwheel: false,
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'images/map_blue.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
It's makes some of my text go bold, nothing shows up in Google inspect element for bold or font weight.. However if i remove said code ^ then it fixes itself..
This confuses me as I can't see how the two can be related.. I checked for missing characters in my html but its perfect (validated on sites too)..
Cheers Guys

Had the same problem, reason is that page use font "Roboto" with font-weight: 300, but google maps load this font with weight 300,400,500,700 so "normal" eq 400, not 300 and text becomes bolder

How to mark a place using google map

I'm trying to set a contact page in which I display google's map to indicate the place of a meet. I'm currently using using these codes:
js
(function(){
document.getElementById('map_canvas').style.display="block";
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(0.0, 0.0)
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
})();
html
<script type="application/javascript" src="/js/google-map.js">
<div id="map_canvas" style="width:80%; height: 400px; margin:auto;"></div>
The problem is that I couldn't be able to mark the indicated place like in google map to precise to the user the indicated place. Any brilliant idea, please?

First you need to define the Latitude and Longitude of the mark
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
Then you need to add a marker:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
Take a look at
https://developers.google.com/maps/documentation/javascript/examples/marker-simple?hl=es

Javascript google maps

I have multiple locations of my company's regional offices and have to show each location whenever user clicks at a locations like:
location1
location2
location3
When user clicks at location 1 it will show location 1 on the map. I also have those locations in my maps. I have never worked with Google maps before, so I just need some idea to get started.

When your user clicks a link, run a piece a javascript that calls setCenter(latlng:LatLng) on the map to center the map to a certain location.
If you really don't know where to begin, then start by reading the Google Maps API documentation. It's easy to read, and it contains lots of working examples.

You can do something like this: (I'm sure it could be optimized with a for loop, its early/late right now.
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() { //Initalize JS after onload
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var randomPoint1 = new google.maps.LatLng(44.6479, -63.5744); //First Location
var marker1 = new google.maps.Marker({ //Set up marker
position: randomPoint1,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker1.getPosition());
});
var randomPoint2 = new google.maps.LatLng(45.5081, -73.5550); //Second Location
var marker2 = new google.maps.Marker({
position: randomPoint2,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid2'), 'click',//Set up DOM listener 2
function(){
map.setZoom(13);
map.setCenter(marker2.getPosition());
});
var randomPoint3 = new google.maps.LatLng(43.6481, -79.4042); //Third Location
var marker3 = new google.maps.Marker({
position: randomPoint3,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 3
function(){
map.setZoom(13);
map.setCenter(marker3.getPosition());
});
map.setCenter(marker2.getPosition());
map.setZoom(5);
}
</script>
</head>
<body onload="initialize()"> <!--Initalize JS after onload--->
Halifax
Montreal
Toronto
<div id="map_canvas" style="height:100%; width:100%"></div>
</body>
</html>
And after I write this I realize the post was from last August. Oh well, may help someone at some point.