Google Maps (JS API V3): embed personalized maps

You could say it’s a must to personalize the embeded google map on your contactpage. Eventually the map needs to fit to the colors of the webpage and the marker, which defines the exact location on the map, should include the companies logo. But how can you accomplish this on your page?

That for you need to create a new js-file (gmap.js) or include the following code into an already existing js-file. If a new file is created, don’t forget to call the file in the header of your page. Include now the following code into your new or already existing js-file:

function initialize() {
  var myLatlng = new google.maps.LatLng(xx.xxxx,x.xxxxx); /*replace the x in the braces with your coordinates*/
  var mapOptions = {
    zoom: 15, /*define the zoom factor here*/
    center: myLatlng, /*it was defined here, to center the map after the defined coordinates above, you can also replace this with other coordinates*/ 
    panControl: false, /*activate panControl (true) or deactivate (false) it*/
    zoomControl: true, /*activate or deactivate zoomControl (+/-)*/
    mapTypeControl: true, /* allow or disallow map type control*/
    mapTypeId: google.maps.MapTypeId.ROADMAP, /* define map type here, SATELLITE would also be an option*/
    styles: [ { "featureType": "water", "elementType": "geometry", "stylers": [ { "hue": "#009877" }, { "saturation": "100" }, { "lightness": "-61" }, { "visibility": "on" } ] }] /* define map styles here (colors of map elements)*/
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Street 2001, 6120 City', /*define title of the marker here (for example an address)*/
      icon: '../img/mymarker.png' /*insert the path to the personalized marker*/
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

The prepared map needs to be included into your page with inserting the following div:

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

To prevent the Controlpanels on the map from appearing warped you need to add the following code snippet into your css-file:

#map img {
	max-width: none;
}

How to figure out your coordinates

Insert the address you want to know the coordinates of on the page Google Maps. If you search for the train station in lucerne google maps changes its link from www.google.com/maps to https://www.google.com/maps/search/bahnhof+luzern/@47.0489115,8.3100975,17z/data=!3m1!4b1. The two numbers after the @-symbol (47.0489115,8.3100975) define the coordinates of the inserted address.

How to create styles for google maps?

There are a few webpages where you can easily create styles for google maps. One of them is this one. Just define the desired styles, click on the button ‘Show JSON’, copy code and insert at ‘styles:’ in your ‘gmap.js file.

Useful links

On the developer page of Google you can find more style options for your map and control panels.

About This Author

Grüezi! My name is Angela. I'm projectleader of the swissbased webagency Tree Stones, i love fantasybooks and you could say i'm in a unhealty realtionship with coffe from Starbucks.

Post A Reply

*