Print multiply markers on Google Maps with JavaScript

Question

I try to print on google map(v3) multiply markers. I'm using clusters and blue markers for the general records. And red markers for the stores position. My code is as following:

function initialize(){

          //some code here
      //....
          //....

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var markers = [];

    for (var i = 0; i < <?= $total_records ?>; i++) {
       var latLng = new google.maps.LatLng(geo_data.records[i].lat, geo_data.records[i].lng);
       var marker = new google.maps.Marker({
                                           position: latLng,
                                           draggable: true,
                                           icon: markerImage
                                         });
       markers.push(marker);
    }

    var imageUrl2 = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=AAAAA,008CFF,000000&ext=.png';
    var markerImage2 = new google.maps.MarkerImage(imageUrl2,new google.maps.Size(24, 32));     
    for (var i = 0; i < <?= $store_records ?>; i++) {
       var latLng = new google.maps.LatLng(store_data.storeRecords[i].lat, store_data.storeRecords[i].lng);
       var marker = new google.maps.Marker({
                                           position: latLng,
                                           draggable: true,
                                           icon: markerImage2
                                         });
       markers.push(marker);
    }


    var zoom = 14;
    var size = 60;

    var markerClusterer = new MarkerClusterer(map, markers, {
                                              maxZoom: zoom,
                                              gridSize: size
                                             });

}

However now I take two wired errors:

Uncaught SyntaxError: Unexpected identifier jquery-1.5.1.min.js:16
Uncaught ReferenceError: initialize is not defined

I think that the problem is that I can't use the function the Marker class twice but I'm not sure. Can anyone tell me how can I solve this problem?

score 0 · Answer 1 · answered Jan 29 '13 at 15:35

Well. jQuery is now a v1.9.0 so I'd probably start by using a newer version of jQuery. You can init as many Markers as you like, well as performance allows.

I notice you're using document.getElementId as opposed to the jQuery selector. do you need jQuery in your page at all? Have you commented out lines to work out which one causes each error?

score 0 · Answer 2 · edited May 23 '17 at 10:24

For #1, as there is no initialize object or method in your code, I'd have to assume that error is coming from another part of your application. Where is this method being called from? You can "break on all errors" in a debugging tool to see. Did you perhaps copy and paste some code that has an onload event initializer? Look for something like this:

<body onload="initialize()">

As for #2, there appears to be a similar bug in the jQuery validation library.

score 0 · Answer 3 · answered May 06 '13 at 18:18

Prueba esto (try this)

HTML file

ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
maps.google.com/maps/api/js?sensor=false&language=es
google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js
google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js

JS file

...onload....
.
.
var markers = [];
.
.
/* esto hace el truco */
var marcador = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: sede,
enter code here`icon: 'https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|'+num+'|FFFF00|000000',
});
markers.push(marcador);

var markerclusterer = new MarkerClusterer(map, markers, { zoomOnClick: true });

Print multiply markers on Google Maps with JavaScript

3 Answers3