Google Maps script in particular format

Question

I have a Google Maps script in this format:

function initMap()
{
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {center: {lat: 45.9, lng: 25.0}, zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP, disableDoubleClickZoom:true, scrollwheel:false, ...});

var marker = new google.maps.Marker({position: {lat:46.1, lng:25.4}, map:map, icon:'../images/Marker.png});
}

I'd like to know how the var marker part of the script must look like if there were more than one points to be displayed. Note: I have seen JavaScript examples on StackExchange which use arrays etc. - one of the best is here: Google Maps Script - but I want my script to use the format above, which is very simple.

"I have seen JavaScript examples on StackExchange which use arrays, but I want my script to use the format above, which is very simple" - I want to use my hands to open a door without using my hands. — Jared Smith, Feb 17 '17 at 14:13
@Jared Not quite. I remenber having this somewhere in my files, but I don't find it anymore. At least that's what I remember - several points on the map. — Mikey, Feb 17 '17 at 14:49
You just need to repeat the marker definition for each additional marker. Related question: [Google Maps API v3 adding multiple markers w/ info windows w/ custom text](http://stackoverflow.com/questions/16825290/google-maps-api-v3-adding-multiple-markers-w-info-windows-w-custom-text) — geocodezip, Feb 17 '17 at 14:57

score 1 · Accepted Answer · answered Feb 17 '17 at 14:02

1

The google.maps.Marker class can only create a marker for a single point at at time, so you'll need some way to repeat that for all your points.

I'd say have an array of objects, each of which has the latitude and longitude values as separate properties. And any other properties you might want to associate with all your points, such as titles and icons. e.g.

var places = [
    {
        latitude: 46.1,
        longitude: 25.4
        title: "Place 1",
        icon: "blue.png"
    },
    {
        latitude: 54.1,
        longitude: 0.0
        title: "Place 2"
        icon: "red.png"
    },
    // etc
];

Then when you want to create the markers, just loop over the array:

for (var i = 0; i < places.length; i++) {
    marker = new google.maps.Marker({
        position: {lat:places[i].latitude, lng: places[i].longitude}, 
        title: places[i].title,
        map: map, 
        icon: '../images/' + places[i].icon
    });
}

answered Feb 17 '17 at 14:02

duncan

31,401
13
78
99

duncan: So, if I understand correctly, if I repeated the var marker part in your answer with different coordinates, I'd get what I want ? Don't I need to use a different variable name each time, like marker_1, marker_2 etc. ? – Mikey Feb 17 '17 at 14:54
duncan, @geocodezip: Thanks ! It works if I add the var marker line with different values for the coordinates. And I can use the same variable again. Since I generate them dinamically in PHP / MySQL, this is the simplest thing to do. – Mikey Feb 17 '17 at 15:10
The same variable name is fine unless you're wanting to do anything different with each one (in which case I'd just push it back into your array for later use). It just overwrites the variable each time, so at the end of the loop `marker` is just equal to the very last one. You don't even need to assign it to a variable, you could just do `new google.maps.Marker(...)` each time. – duncan Feb 17 '17 at 15:20
Correct. JavaScript rookie that I am, but I knew using **var marker** would overwrite or redefine the variable. – Mikey Feb 17 '17 at 15:22
Even better. And no, I don't need to reuse the markers, I just need to paint them on the map each time the PHP script is generated, after I read them from a MySQL table. That's why I wanted it so simple. – Mikey Feb 17 '17 at 15:32

Google Maps script in particular format

1 Answers1