Christian Van Voorst Christian Van Voorst - 11 months ago 65
HTML Question

Custom Google Maps marker HTML

I'm embedding a Google maps style footer, with a div overlay containing things like working hours, or contact info. I'm also trying to incorporate a custom location marker, something like this:

Example marker

Can anyone help me with this?

Answer Source

Assuming you're using the google maps API, you can use this code.

function initMap() {
  // store latitude and longitude for map and marker
  var myLatLng = {lat: -25.363, lng: 131.044};

  // create a map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng

  // create a custom marker
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!',
    icon: 'my-image.png'

This code created a myLatLng variable which stores the Latitude and Longtitude, it then creates a map object. I assume you already have that setup if you have a map in your site.

The code then declared a marker, using the same latitude and longitude at the map via the position property, setting a title via the title property and choosing the image that will be used on the marker via the icon property.

This function was initially lifted straight from the documentation found at: