CODEWITHSUNDEEP
javascriptcssgoogle-maps-api-3
James Snowy
James Snowy

Reputation: 415

How can I point out a specific location in Google Maps?

How can I point out a specific location in Google Maps? I tried to look at the questions before but I didn't find anything that could "help" me.

JavaScript

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(58.393584, 15.566656),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

CSS

#map {       
width: 500px;
height: 400px;
float: left;
margin: 10px;
margin-top: 15px;
}

(Ignore the margin and float), it does zoom in onto the location but how can I add a pointer to it? Would an image of a pointer do? Might be a newbie question, but thanks if you can help me.

Upvotes: 0

Views: 725

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

You're missing the Marker Object.
For the Label you can use maplabel.js

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(58.393584, 15.566656),
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);

  // MARKER:
  var marker = new google.maps.Marker({
    position: mapOptions.center,
    label: "G",
    map: map
  });
  
  // LABEL:
  var mapLabel = new MapLabel({
    text: "Go here!",
    position: mapOptions.center,
    map: map,
    fontSize: 22,
    align: 'center'
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
#map {       
  width: 500px;
  height: 400px;
  float: left;
  margin: 10px;
  margin-top: 15px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel.js"></script>

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

Upvotes: 2

Nick Snick
Nick Snick

Reputation: 931

Instead of using the google maps API like this, I would personally use Polymer for google-elements like google-map etc.

Polymer is all about web-components, it's very simple, clean & easy to use.

Example of how the google maps API would work with a Polymer element

<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
  <google-map-marker latitude="37.779" longitude="-122.3892"
      draggable="true" title="This is a title"></google-map-marker>
  <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
</google-map>

It's amazingly simple and flexible.

Here's the link to the documentation if you're interested:

https://elements.polymer-project.org/elements/google-map

Upvotes: 0

Related Questions