Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

Solved

Placing my location and multiple markers on a google map

Posted on 2015-01-30

1 solution

Medium Priority

1,394 Views

Last Modified: 2015-01-31

I am really struggling here and hope you can help. I have been hacking together disparate pieces of code and can make one part work but only by breaking the next so am hopeful someone can help me pull of this together:

I found this code to place multiple markers on the page:

      
      var locations = [
      ['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]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: navigator.geolocation.getCurrentPosition(showPosition, showError),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    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

      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

Open in new window

So i hoped that by replacing the locations array with:

var Locations = [{% block content %}{% for e in object_list %}['{{ e.name}}', {{ e.latitude}}, {{ e.longitude}}, 4],
        {% endfor %}]{% endblock %};

Open in new window

would mean that I could grab my locations and other attributes from my database. The output looks the same:

var Locations = [['Everyone Active Hartham Leisure Centre', 51.800052, -0.077467, 4],
        ['Gordons Gym', 51.480226, 0.069589, 4],
        ['The Concorde Club', 51.48808, -0.40301, 4],
        ['Croydon High Sports Club', 51.341246, -0.061708, 4],
        ['Everyone Active Northolt Leisure Centre', 51.548934, -0.375026, 4],
        ['Everyone Active Central Park Leisure Centre', 51.602689, 0.228719, 4],
        ['Heston Community Sports Hall', 51.480955, -0.365949, 4],
        ['Everyone Active Westminster Lodge Leisure Centre', 51.750365, -0.34032, 4],
        ['Everyone Active Hornchurch Sports Centre', 51.563842, 0.207556, 4],
...
...
...
        ['The Landmark Spa and Health Club', 51.521554, -0.161116, 4],
        ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406, 4],
        ];

Open in new window

NB I didn't know what the final variable was for, so I just put "4" there but insight into what that should be would also be helpful. I also notice a trailing comma but can't work out how to remove that, and hence can't see if that is the problem.

Where have I gone wrong?
thanks

Comment

Question by:lz7cjc

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

5 Comments

LVL 35

Expert Comment

by:Robert Schutt

ID: 405811322015-01-30

I see a couple of issues here that are easily remedied but I'm concentrating just on the JavaScript, not able to make/test changes to the Python/Django(?) part.

1) var Locations

JavaScript is case sensitive so if you want to use a capital L, you need to change the rest of the code as well, otherwise leave it lowercase.

2) The ", 4" at the end of each array entry

that's not used in the code you've posted (may have been used in the infowindow.setContent call originally) so unless you have more code where at some point locations[x][3] is used, it's not relevant here and you should be able to leave it out altogether.

3) trailing comma

this has actually been changed at some point in the definition of the language to be allowed (and ignored) so it won't affect the length of your array and shouldn't be a problem if you're targeting modern browsers.

If you do need to support old browsers (like IE8) there are at least 2 solutions:

(a) change the location of the comma from the end to the start of the line, leaving an empty entry at the start of the array which you can skip by making the for loop start at i = 1.

    for (i = 1; i < locations.length; i++) {
      // ...
    }

Open in new window

(b) test for empty entries in the for loop:

    for (i = 0; i < locations.length; i++) {
      var x = i; // don't actually use this code, just use "i" below, but you can't put an "i" in square brackets in a comment on EE :-)
      if (locations[x] != null) { // in case trailing comma is not ignored
        // ...
      }
    }

Open in new window

((c)) the best solution would be some sort of {% if ... %} but I don't know the syntax for that...

Author Comment

by:lz7cjc

ID: 405813172015-01-31

thanks Robert that's fantastic, really helpful. Unfortunately I can't implement since I appear to have now taken a massive step back and can't get the map to even appear. Can you help me?

<!DOCTYPE html>
<html>
    <head>
        <script src="http://maps.google.com/maps/api/js?sensor=true">
        </script>
        <script>


var locations = [
      ['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]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: navigator.geolocation.getCurrentPosition(showPosition, showError),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    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

      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
</script>
            </head>
    <style>

    #map {
        height: 400px;
        width: 700px;
        }

    </style>
    <body>
        <div>
        <h2>HTML5 Show Location on GoogleMap Sample</h2>

            <div id="map"></div>
        </div>

    </body>
</html>

Open in new window

LVL 35

Expert Comment

by:Robert Schutt

ID: 405813232015-01-31

The script block with your code needs to be able to reference the html document because of this line:

document.getElementById('map')

Open in new window

So you have 2 options: either wrap your code in a function and run it on window.onload, or move the whole script block to the end of the document (just before </body>).

Then, check if it works for you. In my browser the console (using F12) shows an error on the geolocation call. To test, I replaced it with:

center: new google.maps.LatLng(locations[0][1], locations[0][2]),

Open in new window

LVL 35

Accepted Solution

by:Robert Schutt

Robert Schutt earned 2000 total points

ID: 405813382015-01-31

Working off some base code found on w3schools I got the following working: http://schutt.nl/ee/Q_28607042/

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
        <script src="http://maps.google.com/maps/api/js?sensor=true">
        </script>
            </head>
    <style>

    #map {
        height: 400px;
        width: 700px;
        }

    </style>
    <body>
        <div>
        <h2>HTML5 Show Location on GoogleMap Sample</h2>

            <div id="map"></div>
        </div>

        <script>


var locations = [['Everyone Active Hartham Leisure Centre', 51.800052, -0.077467],
        ['Gordons Gym', 51.480226, 0.069589],
        ['The Concorde Club', 51.48808, -0.40301],
        ['Croydon High Sports Club', 51.341246, -0.061708],
        ['Everyone Active Northolt Leisure Centre', 51.548934, -0.375026],
        ['Everyone Active Central Park Leisure Centre', 51.602689, 0.228719],
        ['Heston Community Sports Hall', 51.480955, -0.365949],
        ['Everyone Active Westminster Lodge Leisure Centre', 51.750365, -0.34032],
        ['Everyone Active Hornchurch Sports Centre', 51.563842, 0.207556],
//...
        ['The Landmark Spa and Health Club', 51.521554, -0.161116],
        ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406],
        ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    navigator.geolocation && navigator.geolocation.getCurrentPosition(showPosition, showError) == undefined && showError();

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    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

      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

function showPosition(position) {
  lat = position.coords.latitude;
  lon = position.coords.longitude;
  latlon = new google.maps.LatLng(lat, lon);
  map.setCenter(latlon);
}

function showError(error) {
  map.setCenter(new google.maps.LatLng(locations[0][1], locations[0][2])); // default 1st from array
}

</script>
    </body>
</html>

Open in new window

If the geolocation doesn't work, it takes the first location in the array as center.

Author Comment

by:lz7cjc

ID: 405814812015-01-31

thank you so much for your help - you have just saved me many headaches!

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get Started with JavaScript

Article by: Experts Exchange

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …

JavaScript

Faster Node Rejoins with Improved IST performance

Article by: Percona

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.

Python Programming: Lists

Video by: Dototot

Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…

Python Programming: Modules

Video by: Dototot

Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…