Google Maps With Multiple Labelled Dynamic Markers

Here is some code that I wanted to share that will let you embed multiple markers in your map with dynamic labels.
I looked around on the internet but couldn’t really find much help so I decided to create one on my own (with help from Google Maps API obviously).

Here are some icon packs that I found on this website. They might be helpful and save some time instead of you creating them on your own. Click here to download.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
function initialize() {
    var locations = {Some_locations};
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng({Location_center}),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    // Link to the markers you created or downloaded
    // I named them as marker1.png, marker2.png, marker3.png… Its easier that way to increment
    var i;
    var markers = [];
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations<i>[1], locations<i>[2]),
            map: map,
            icon: new google.maps.MarkerImage(marImg + (i+1) + '.png'),
    }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Here is the final output:

 

This entry was posted in Technology and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>