plotting multiple google maps to page
- by Roland
I'm trying to append more than one Google Map to a page. But it seems like I'm having some trouble.
This would be the template I'm using to ( with Handlebars.js ) to create the same block more than once, about 50 times :
<script type="text/x-handlebars-template">
{{#each productListing}}
<div class="product-listing-wrapper">
<div class="product-listing">
<div class="left-side-content">
<div class="thumb-wrapper" data-image-link="{{ThumbnailUrl}}">
<i class="thumb">
<img src="{{ThumbnailUrl}}" alt="Thumb">
<span class="zoom-image"></span>
</i>
</div>
<div class="google-maps-wrapper">
<div class="google-coordonates-wrapper">
<div class="google-coordonates">
<p>{{LatLon.Lat}}</p>
<p>{{LatLon.Lon}}</p>
</div>
</div>
<div class="google-maps-button">
<a class="google-maps" href="#">Google Maps</a>
</div>
</div>
</div>
<div class="right-side-content">
<div class="map-canvas-wrapper">
<div id="map-canvas" class="map-canvas" data-latitude="{{LatLon.Lat}}" data-longitude="{{LatLon.Lon}}"></div>
</div>
<div class="content-wrapper"></div>
</div>
</div>
</div>
{{/each}}
And I'm trying to append the map to the #map-canvas id. With the following block of code I'm doing the plotting :
Cluster.prototype.initiate_map_assembling = function() {
return $(this.map_canvas_wrapper_class).each(function(index, element) {
var canvas = $(element).children();
var latitude = $(canvas).attr('data-latitude');
var longitude = $(canvas).attr('data-longitude');
var coordinates = new google.maps.LatLng(latitude, longitude);
var options = {
zoom: 9,
center: coordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($(canvas), options);
var marker = new google.maps.Marker({
position: coordinates,
map: map
});
});
};
This way I'm "looping" through all the parent classes of the id I'm trying to append the map to, but the map would only append to the first id. I tried to append it to all of the id's in other ways but with the same results.
So what would you suggest me to do to make it work as I would expect it, append the map to each of the id's ?
