5

I'm trying to create a simple click event when I click on a list item on my page, a marker should be created on the google map in that page. But it does not happen. Is there some google maps API limitation I'm missing here?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Google Maps Test</title>
</head>

<body>

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

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

<script src="rome-gm.js"></script> 

<style>
  body {background-color: #fff5e5;}
  #map {height: 650px;} 
  ul {list-style-type: circle; float: left; width: 140px; height: 30px; line-height: 240%; padding-left: 20px; padding-right: 10px; cursor: pointer;}
  li:hover {background-color: #e62e00;}
  li {font-family: "georgia", "san-serif";}
  h1 {text-align: center; font-family: "georgia", "san-serif";}
</style>

<h1>Roman Weekend</h1>

<ul>
  <li onclick="terminiFunction()">Termini</li>
</ul>

</body>

</html>

and here is the script:

function initMap() {
  // Create a map object and specify the DOM element for display.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.902728, lng: 12.496246},
    scrollwheel: false,
    zoom: 13
  });
}

google.maps.event.addDomListener(window, 'load', initMap)

  var marker = new google.maps.Marker({
    position: {lat: 41.900819, lng: 12.501757},
    title:"Termini"
});

function terminiFunction() {
  marker.setMap(map)
}
Improve this question

1 Answer 1

Reset to default
1

You need to create marker object before or on click on the list item. Currently, what is happening is that marker object is not initialized properly and also the map object is not accessible in terminiFunction(). Here are the updated functions:

var map;
    function initMap() {
        // Create a map object and specify the DOM element for display.
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 41.902728, lng: 12.496246},
            scrollwheel: false,
            zoom: 13
        });
    }
function terminiFunction() {
        var marker = new google.maps.Marker({
            position: {lat: 41.900819, lng: 12.501757},
            title: "Termini"
        });
        marker.setMap(map);
    }

Change your code according to your requirement.

Improve this answer
6
  • First thing I notice is creating the marker outside the initMap function does'n't work. Second thing is wrapping this marker variable into a terminiFunction inside initMap also doesn't work. So i'm kinda lost here.
    – Salman
    Feb 11, 2016 at 11:02
  • How placing marker object in terminiFunction() does not work? What error are you getting?
    – Fahad Bin Naeem
    Feb 11, 2016 at 11:17
  • When I place marker object in the terminiFunction() inside the initiMap() function, the marker is not being added to the map when I click on the list item.
    – Salman
    Feb 11, 2016 at 12:20
  • I just realized that none of the click events work with my list item. I even tried using jquery to handle the click event. Not even a simple alert text works. Something is seriously wrong.
    – Salman
    Feb 11, 2016 at 14:10
  • I used your provided code to test, and it is working fine, could you please create jsfiddle and provide me the link?
    – Fahad Bin Naeem
    Feb 11, 2016 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.