Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Matthew 93 posts 153 karma points
    Jun 29, 2012 @ 02:47
    Matthew
    0

    Build an array of locations for multiple Google Maps markers

    Tim's Locator is overkill as I don't need user interaction but I'm too noob to figure out how to pirate it.  The GM example looks fairly straightforward, thought I could figure it out if I could figure out how to feed it from an array but not really sure how to build an array properly for it.

    Trying to strip down Tim's code and use my existing good GM functions, I have constructed this Frankenstein, which is erroring on save with 'Argument missing' and will start killing villagers soon:

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @using umbraco.MacroEngines;
    @{

    List<GeoItem> items = new List<GeoItem>();
    Location = new Location();
    foreach (var node in Model.DescendantsOrSelf("Glacier").OrderBy("LatLon")) {
    Location itemLocation = new Location(node.MarkerLatLon,);
    items.Add(new GeoItem(node,itemLocation));
    }
    }

    @if(items.Count > 0)
    {

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript">
    function initialize() {

    var MapCenterLatLon = new google.maps.LatLng(@Model.LatLon);

    var myOptions =
    {
    center: MapCenterLatLon,
    zoom: @Model.zoom,
    mapTypeId: [email protected]
    };
    var map = new google.maps.Map(document.getElementById("topimg"), myOptions);

    @{int c = 1;}
    @foreach(GeoItem geo in items){
    dynamic node = ((DynamicNode)geo.Node);

    <text>
    var mLatlng@(c) = new google.maps.LatLng(MapCenterLatLon);
    var marker@(c) = new google.maps.Marker({
    position: mLatlng@(c) ,
    map: map,
    title:"@node.Name"
    });
    </text>
    c++;
    }
    }
    initialize();
    </script>

    }

    For reference, the Google Maps example (slightly stripped down) looks like this:

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize() {
    var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

    setMarkers(map, beaches);
    }

    /**
    * Data for the markers consisting of a name, a LatLng and a zIndex for
    * the order in which these markers should display on top of each
    * other.
    */
    var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    function setMarkers(map, locations) {
    // Add markers to the map
    var image = new google.maps.MarkerImage('images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    new google.maps.Point(0, 32));
    var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
    };
    for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    shape: shape,
    title: beach[0],
    zIndex: beach[3]
    });
    }
    }
    </script>

    I'd be glad to go either way, finish my stripped down version of Tim's or build an array for GM's, whatever's best.  I also hope to gain some understanding about how arrays get built, if anyone can provide some nuts and bolts for that part too.

     

     

  • Matthew 93 posts 153 karma points
    Jun 29, 2012 @ 18:29
    Matthew
    0

    Deleting as much dribble as possible...

  • Matthew 93 posts 153 karma points
    Jun 29, 2012 @ 20:58
    Matthew
    0

    Deleting as much dribble as possible...

  • Matthew 93 posts 153 karma points
    Jun 30, 2012 @ 02:51
    Matthew
    0

    For anyone who's been enjoying the comedy, or for those noobs who follow behind, here's what finally worked (any suggestions for improvement welcome):


    @inherits umbraco.MacroEngines.DynamicNodeContext
    @using umbraco.MacroEngines;

    @{
      DynamicNode n = @Model;
      List<DynamicNode> nl = @Model.Children.Items;
    }

    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript">

    function initialize()
    {

      var MapCenterLatLon = new google.maps.LatLng(@Model.LatLon);

      var myOptions =
        {
        center: MapCenterLatLon,
        zoom: @Model.zoom,
        mapTypeId: google.maps.MapTypeId.@Model.mapTypeID
        };
      var map = new google.maps.Map(document.getElementById("topimg"), myOptions);

        @foreach (var item in Model.DescendantsOrSelf("Glacier").OrderBy("Name"))
        {
        <text>
      var GlacierMarkerImage = new google.maps.MarkerImage('/images/glacierMarker.png',
        new google.maps.Size(32,37),
        new google.maps.Point(0,0),
        new google.maps.Point(16,37)
        );
      var MarkerPos = new google.maps.LatLng(@item.MarkerLatLon);
      var title = '@(item.Name)';
      var GlacierMarker = new google.maps.Marker({
        position: MarkerPos,
        map: map,
        icon: GlacierMarkerImage,
        title:"@item.Name"
        });
       </text>
       }
    }
    </script>

     

Please Sign in or register to post replies

Write your reply to:

Draft