Develop Reference

Google Maps API JSFIDDLE One marker showing up when I need 5 markers to show up

I'm trying to add 5 markers to Google Maps API JSFiddle but only one is showing up. Help?
I don't know what's wrong with my code, I've tried everything. As far as I'm aware my code is correct.
Link to JSFIDDLE: https://jsfiddle.net/MarnieMaclean/u04cg62p/
// Initialize and add the map
function initMap() {
//The location of Aberdeen
var aberdeen = {lat: 57.155988, lng: -2.095139};
var city1 = 'Aberdeen\n'+'lat:57.155988, lng: -2.095139'; // The
map,
centered at Aberdeen
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: aberdeen});
// The marker, positioned at Aberdeen
var marker1 = new google.maps.Marker({position: aberdeen, map: map,
id: c1, title: city1});
//The location of Inverness
var inverness = {lat: 57.480819, lng: -4.224250};
var city2 = 'Inverness\n'+'lat: 57.480819, lng: -4.224250'; // The
map, centered at Inverness
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: inverness});
// The marker, positioned at Inverness
var marker2 = new google.maps.Marker({position: inverness, map: map,
id:c2, title: city2});
//The location of Dundee
var dundee = {lat: 56.467546, lng: -2.969593}; var city3 = dundee;
// The map, centered at Dundee
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: dundee});
// The marker, positioned at Dundee
var marker3 = new google.maps.Marker({position: dundee, map: map});
//The location of Glasgow
var glasgow = {lat: 55.875362, lng: -4.250252};
var city4 = 'Glasgow\n'+'lat: 55.875362, lng: -4.250252'; // The
map, centered at Glasgow
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: glasgow});
// The marker, positioned at Glasgow
var marker4 = new google.maps.Marker({position: glasgow, map: map,
id:c4, title: city4});
//The location of Edinburgh
var edinburgh = {lat: 55.959425, lng: -3.189161};
var city5 = 'Edinburgh\n'+'lat: 55.959425, lng: -3.189161';
var map = new google.maps.Map( document.getElementById('map'),
{zoom: 4, center: edinburgh});
// The marker, positioned at Edinburgh
var marker5 = new google.maps.Marker({position: edinburgh, map: map,
id: c5, title: city5}); }

You need only one map object (removed the others )
// Initialize and add the map
function initMap() {
var inverness = {lat: 57.480819, lng: -4.224250};
var city1 = {position: inverness};
// The map, centered at Inverness
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: inverness});
// The marker, positioned at Inverness
var marker1 = new google.maps.Marker({position: inverness, map: map});
var dundee = {lat: 56.467546, lng: -2.969593};
var city2 = {position: dundee};
// The marker, positioned at Dundee
var marker2 = new google.maps.Marker({position: dundee, map: map});
var glasgow = {lat: 55.875362, lng: -4.250252};
var city3 = {position: glasgow};
// The marker, positioned at Glasgow
var marker3 = new google.maps.Marker({position: glasgow, map: map});
var edinburgh = {lat: 55.959425, lng: -3.189161};
var city4 = {position: edinburgh};
// The marker, positioned at Edinburgh
var marker4 = new google.maps.Marker({position: edinburgh, map: map});
var aberdeen = {lat: 57.155988, lng: -2.095139};
var city5 = {position: aberdeen};
// The marker, positioned at Aberdeen
var marker5 = new google.maps.Marker({position: aberdeen, map: map});
}
https://jsfiddle.net/0uq73kzo/

The problem is: you're creating the map 5 times, setting it up every time and setting only one marker in each. Every time you're using the variable "map" and the last one wins. That get displayed. So: create the "map" at the beginning ONCE and then USE it down below.
Remove the 4 more "var map = ..." lines.

Putting markers on google maps

I am trying to put two separate markers on two separate maps that are positioned side by side on my website.
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
}
</script>

You can create a simple maker for this.
Just place this in your code after map = new Google.maps.Map(document.getElementById("map_canvas"), myOptions);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
And after map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
Example
Your code should look like this:
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
}
</script>

That code by itself will not put any markers on the map, it will simply render the maps, with each one centred on the latitude/longitude you specify.
Look at the first example on https://developers.google.com/maps/documentation/javascript/markers for an idea of how to add a marker to each of your maps.

two markers in ionic native geolocation using cordova geolocation

I have a scenario where I need to show the source and destination with two markers and a blue line that indicates directions. I am using cordava plugin geolocation and trying to get the current location like below
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
I also have destination lat and long but I dnt understand how to place them in the code to show two markers and where to show blue connecting line
as
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
takes only an object
Any help would be appreciated.

What i did-
addMarker(position, icon, content) {
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
icon: icon,
position: new google.maps.LatLng(position[0], position[1])
});
}
And then
array.projectsLocation.forEach(element => {
this.addMarker([element.latitude, element.longitude], element.map_pin_url, element.description);
});
I was using custom icons so you can ignore that.
Check documentation.

Google Maps API Javascript Gray Map

I am trying to use google maps API but keep getting a grayed out box instead of a map:
My javascript:
var myLatLng = {lat: -86.408, lng: 43.077};
var map = new google.maps.Map(document.getElementById('postmap'), {
zoom: 16,
center: myLatLng,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
This is what I get:
The weird part is some cooridents work and some don't... for example 0 latitude and 0 longitude renders a map.

The weird part is some cooridents work and some don't
some latitudes are valid, and some not.
The valid range for latitudes is about -85 to 85
Set the zoom to 0 and you'll see that your marker is outside of the map(earth)
function initialize() {
var myLatLng = {lat: -86.408, lng: 43.077};
var map = new google.maps.Map(document.getElementById('postmap'), {
zoom: 0,
center: myLatLng,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#postmap{height:100%;margin:0;padding:0}
<div id="postmap"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

Google Maps marker getPosition() not working - '__e3_' error

I have been struggling to get the below code to work. The aim of the code is to be able to Geolocate the person if they allow geolocation, then when the marker is placed be able to get the Lat and Lng of the marker as it is being dragged around.
Currently the map displays fine and the marker is geolocated in the correct place. But when you begin to drag it, no Lat and Lng is passed to updateMarkerPosition.
The error which I am getting in my chrome console is: *Uncaught TypeError: Cannot read property '_e3' of undefined*
Here is the script I am using, also displaying the files which I include to the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>
function initialize() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapCanvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
// Geolocation found
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: pos,
title: 'Your Location',
map: map,
draggable: true
});
map.setCenter(pos);
}, function() {
// User has cancelled and not let the browser find them using geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
});
} else {
// Browser doesn't support Geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
}
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Code for updateMarkerPosition. This just updated two form elements on the page which display the Lat and Lng:
function updateMarkerPosition(pos) {
$('#posLat').val(pos.lat());
$('#posLong').val(pos.lng());
}

geolocation is asynchronous. The marker is not defined until the callback runs. You need to assign the listener inside the callback function (where the marker is created).
// Try HTML5 geolocation
if(navigator.geolocation) {
// Geolocation found
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: pos,
title: 'Your Location',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
map.setCenter(pos);
}, function() {
// User has cancelled and not let the browser find them using geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
});
} else {
// Browser doesn't support Geolocation
var pos = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: pos,
title: 'Point A',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(marker.getPosition());
});
}