How to plot placemarkers on Googlemaps and display details on clicking one of them?

Question

My team is working on a data mining project that takes input from the user using a web form, crunches a bunch of data and generates predictions that are meant to help law enforcement. We want to plot our predictive results out on a web page in this format: http://www.crimemapping.com/map.aspx?aid=c99b299c-bc94-459a-b0dd-b871278930c3

Objective 1: Plot coordinates on a Google map using place markers.
Objective 2: Display certain details on the map when a place marker is clicked.
Objective 3: . If I have say '15' points to display, the web page displays a map that is 'zoomed into' those 15 points by default? That is, we don't want the entire country/continent to display when the points are clearly concentrated in a particular city.

I have been searching for quite some time regarding what would be the best way to do this. I would like to do it using Python, but it seems like JS is a better way. I saw some posts about KLM and GoogleEarth, but it didn't seem right for my purposes.

Could you please give me suggestions on what would be the best approach to do this?

ScaisEdge · Answer 1 · 2015-11-06T21:16:37.693

This sample is form google doc you can see marker and clicking on it an infowindow

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  </body>
</html>

Thanks, I tried that and it works on my localhost. I have a question though: Is there a reason it does not open a 'zoomed in' view on the rock by default? It show me entire Australia. If I have say '15' points to display, how do I adjust the script to display a map that is 'zoomed into' those 15 points by default? — learnerX, Nov 06 '15 at 21:04
If i understand correctly, you want a diffrente zoom. Try changing the zoom from 4 to 18 where the map is created — ScaisEdge, Nov 06 '15 at 21:16
For the map you are in project i think google maps apis are the better solution , you can also use satellite maps in this way . — ScaisEdge, Nov 06 '15 at 21:19
I thought we are already calling the Google Maps API? Also, how do I display multiple markers on the map instead of just 1? Do I create separate variables for each? Do I create a list of markers using a JS? — learnerX, Nov 06 '15 at 21:30
Look at this http://stackoverflow.com/questions/33565904/display-multiple-points-on-google-map-by-fetching-the-names-from-database and please rate it too — ScaisEdge, Nov 06 '15 at 21:35
The zoom in thing worked. But if I display other points now, those are out of the display area and are not seen. How do I bring it to zoom on the area where the points are concentrated? — learnerX, Nov 06 '15 at 21:39
There are specific buond function for this ... google maps is rich of functions — ScaisEdge, Nov 06 '15 at 21:41

How to plot placemarkers on Googlemaps and display details on clicking one of them?

1 Answers1