CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
halfacreyum
halfacreyum

Reputation: 297

How to add marker on google map pin

I'm trying to add a marker to my google maps and for some reason its not showing up. The map itself is working fine, but the marker will not display. I'm following the google api documentation, and all the other customizable features work fine. I have also tried manually adding the Lon and Lat, but nothing. I'm sure its something simple I'm overlooking but I'm not sure what it is, any help would be much appreciated. Thanks in advance. 

<% if @location.latitude.present? && @location.longitude.present? %>
    <script>
    function initMap() {

    // Specify features and elements to define styles.
    var styleArray = [
      {
        featureType: "all",
        stylers: [
         { saturation: -80 }
        ]
      },{
        featureType: "road.arterial",
        elementType: "geometry",
        stylers: [
          { hue: "#00ffee" },
          { saturation: 50 }
        ]
      },{
        featureType: "poi.business",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      }
    ];

    var myLatLng = {lat: <%= @location.latitude %>, lng: <%= @location.longitude %>};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      // styles: styleArray,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: <%= @location.name %>
    });
    }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?   signed_in=true&callback=initMap">
    </script>
    <div id="map"></div>
   <% end %>

Upvotes: 1

Views: 952

Answers (2)

duncan
duncan

Reputation: 31930

The problem is here:

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: <%= @location.name %>
    });

You're outputting the location.name, but that needs to be in a quoted string. Right now, if you view source and see the client-side code I assume it looks like:

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: Hello World
    });

You're probably getting a JS error. Just try:

var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: '<%= @location.name %>'
    });

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133400

seems you not have setted the position 

 var marker = new google.maps.Marker({
  position: markerPos,
  map: map,
  title: <%= @location.name %>
});

Where is the value for markerPos ..? 

try with myLatLng


var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: <%= @location.name %>
});

And just for debugging try without location.name 

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map
});

Upvotes: 2

Related Questions