Develop Reference

Google map dont work

I have this part of code, that should show pins on google map of certain locations.
<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Sarajevo', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/DOd1sH3.png"
});
});
}
});
<div id="map_canvas"></div>
Map shows up and everything works, but the pins of locations are not shown.
I really dont know why.

Seems like you are calling the constructor without a reference to a variable.
Try this:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/D0d1sH3.png"
});
Alternatively you can set the markers to the map by calling the setMap function
var marker = new google.maps.Marker({
position: latlng,
icon: "http://i.imgur.com/D0d1sH3.png"
});
marker.setMap(map);
Hope this helps

Adding Marker to Google Map

I'm creating a map using the Javascript API, and I'm having some trouble getting the markers to show up.
I've followed this tutorial to create the map, which works well:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
I've then followed this tutorial to add the marker, but it's not loading:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here's my code now:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(43.643296, -79.408475),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options, marker);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

This line
var map = new google.maps.Map(map_canvas, map_options, marker);
is wrong. mapconstructor has only two arguments. It should be
var map = new google.maps.Map(map_canvas, map_options);
And myLatlng is not defined. So, you can change your code to:
function initialize() {
myLatlng = new google.maps.LatLng(43.643296, -79.408475);
var map_canvas = document.getElementById('map');
var map_options = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}

Use this url you will get your answer http://www.w3schools.com/googleAPI/google_maps_overlays.asp

provide a list of latitudes and longitudes to my google map to visualize them with markers

In my project, I have a database containing a list of latitudes and longitudes, corresponding to several addresses, and I want to take them from this database and pass them to a javascript code that will show all these addresses in a map using markers. So far I got all the list from the database. and I was able to visualize one and only one address in the map by using it's latitude and longitude. So what I am struggeling with now is doing so for multiple addresses. Here is the code that I came up with so far:
function initialize() {
var myLatlng = new google.maps.LatLng(locations[0], locations[1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Fast marker"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
locations is the list of my latitudes and longitudes, and it goes like this:
locations[0]: latitude 1
locations[1]: longitude 1
locations[2]: latitude 2
locations[3]: longitude 2 etc..
Now I know there is supposed to be some kind of loop but I couldn't manage to do it.
Thanks in advance!
P.S: This is my first question so don't judge my accept rate! :)

You just need to write a for loop as follows:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(locations[0], locations[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0, ln = locations.length; i < ln; i += 2) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i], locations[i + 1]);
map: map,
title: "Fast marker"
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);​

You can write a simple for loop to iterate through locations. Increment two at a time:
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i=0 ; i < locations.length-1 ; i+=2) {
var lat = locations[i];
var lng = locations[i+1];
var myLatlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Fast marker"
});
}

I got the solution. if anybody needs it in the future here is the code:
function initialize() {
console.log('hi');
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(locations[0], locations[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0, ln = locations.length; i < ln; i += 2) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i], locations[i + 1]),
map: map,
title: "Fast marker"
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);

If you have an array of locations like following
var locations = [
[33.890542, 150.274856],
[36.923036, 152.259052],
[38.028249, 154.157507]
];
then you can use following code
function initialize() {
var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for(var i=0;i<locations.length;i++)
{
var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "marker : "+(i+1)
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Working Example.
You may need/like other Google map related answers here.

Marker not adding to my map

Trying to add a marker to a google map on a contact page I've created. Map renders fine but marker does not appear. Heres my code:
function initialize() {
var latlng = new google.maps.LatLng(-43.51187,172.621192);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
NSMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Add Marker Location
function NSMarker() {
NSArchitects = new google.maps.LatLng(-43.51187,172.621192);
addMarker(NSArchitects);
}

declare var map outside of initialize() function
var map; // declare globel
function initialize() {
var latlng = new google.maps.LatLng(-43.51187,172.621192);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
NSMarker();
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Add Marker Location
function NSMarker() {
NSArchitects = new google.maps.LatLng(-43.51187,172.621192);
addMarker(NSArchitects);
}

Google Maps v3 Terrain View By Default

I'm trying to make my google maps embed default to terrain view. Attached is my code that loads everything correctly except the map options where I set the default view to terrain. I have it set up to only limit the choices to only terrain but when you initially load the page it is on the default hybrid view.
var map, marker, latLngToPixel;
var middle_earth_MORADOR = new google.maps.LatLng(38, 0);
function initialize() {
var mapOptions = {
zoom: 2,
center: middle_earth_MORADOR,
backgroundColor: "#000",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN]
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var locations = [
// PHP LOOP FOR FEATURED PROJECTS
];
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var styledMapOptions = {
map: map,
name: "map"
}
var build = new google.maps.StyledMapType(styledMapOptions);
map.mapTypes.set('map', build);
map.setMapTypeId('map');
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: 'http://staging.******.com/css/images/pin.png',
map: map,
});
marker.setAnimation(google.maps.Animation.DROP);
setTimeout(function(){ marker.setAnimation(null); }, 1750);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
window.location = "http://staging.******.com/projects/" + locations[i][4];
}
})(marker, i));
}
}

I think you can disable the default UI of map by setting the property disableDefaultUI to true, and then set in the options the TERRAIN as the mapTypeId as how I did it below:
function loadMap() {
var myLatlng = new google.maps.LatLng(lat,lan);
var myOptions = {
zoom: 3,
center: myLatlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
//code
}

const map = new window.google.maps.Map(document.getElementById('Map'), {
mapTypeId: 'terrain'
});