Hi Allan,

Show your map code please. Are you using Google Map API ?

Hi Alex

Here's the code as it currently stands:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

  @{
        var nodeId = Model.MacroParameters["mapNode"];
        var node = Umbraco.Content(nodeId);    
       string mapLocation = node.mapLocation.ToString().Trim();
      string[] mapLocationInfo = mapLocation.Split( ',' );
      string latitude = mapLocationInfo[0];
     string longitude = mapLocationInfo[1];
        string zoom = mapLocationInfo[2];
     var markerCount = node.Children.Where("Visible").Count();
     var markers = node.Children.Where("Visible");
 }

<style>
    #map-canvas {
     height: @Model.MacroParameters["mapHeight"];
        margin: 0px;
        padding: 0px
  }
</style>

<script>
   function initialize() {
       var myLatlng = new google.maps.LatLng(@latitude, @longitude);
     var mapOptions = {
            zoom: @zoom, center: myLatlng
     };
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

       @foreach (var item in markers) {
          string markerLocation = @item.mapLocation.ToString().Trim();
          string[] markerLocationInfo = @markerLocation.Split( ',' );
           <text>
          var markerLatitude = @markerLocationInfo[0];
          var markerLongitude = @markerLocationInfo[1];
         var contentString = '@item.markerInfo';
           var markerName = '@item.pageName';
            
          var infowindow = new google.maps.InfoWindow({
             content: contentString,
                   maxWidth: 200
         });
           var markerLatlng = new google.maps.LatLng(markerLatitude, markerLongitude);
           var marker = new google.maps.Marker({
             position: markerLatlng,
               map: map,
             title: markerName
         });
           
          google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,this);
            });
           </text>
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
 <div id="map-canvas"></div>

Thanks
Allan

Looks to me you have a closure problem with your addListerner(), which will use the last value of infowindow.

http://stackoverflow.com/questions/7044587/adding-multiple-markers-with-infowindows-google-maps-api

Can you please provide the full description on how you added multiple marker on Maps using this package Angular Google Maps?

Hi Abhishek,

Not too sure why you have added a question to a 2 year old thread, but this package, Angular Google Maps, has been deprecated for Terratype which has superior features and also contains examples in the manual showing exactly how to do this. It comes with its own renderer which takes all the hassle out of displaying maps

But, if you are intent on continuing to use Angular Google Maps, then like any data type you can place multiple copies of it either across various content nodes or within complex datatypes like Grid Editor, Nested Content or Archetype. Once you have multiple maps, you then have to write your own javascript code to display those multiple maps as one map. The code listed above by Allan does do that except for a small issue to do with closure, which can be rectified using the 'with' command

with ({
    c : contentString
}) {
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 200
    });
}

Cheers

Jonathan

is working on a reply...