Adding simple Google Map with API 3 without jQuery plugin
Warning: We have developed a more complete solution about Google Map, check it here.
Coffeescript
This script will create a map inside the element with id specified in the variable id
; the map will be showed with a single marker pointed in the coordinates specified in the variable markerLatLng
; there will be also a pop up with html content (see variable infoWindowContent
) and a custom marker icon (set the path to the custom icon in the variable image
)
initializeMap = ->
# Settings (you only need to edit these settings and your map will be displayed inside the element with id "map")
id = "map"
markerLatLng = new google.maps.LatLng(41.823837, -71.411727)
infoWindowContent = "
Your home
Your address
Your town"
image = "assets/img/custom_icon.png"
title = "My home is here"
# Map Options
mapOptions =
zoom: 8
center: markerLatLng
scrollwheel: false
# Creates the map inside the above specified ID
map = new google.maps.Map(document.getElementById(id), mapOptions)
# Creates the marker
marker = new google.maps.Marker(
position: markerLatLng
map: map
title: title
icon: image
)
# Creates a pop up (info window)
infoWindow = new google.maps.InfoWindow(
content: infoWindowContent
)
# When click on 'marker' icon it shows the pop up
google.maps.event.addListener marker, "click", ->
infoWindow.open map, marker
# Displays the map
google.maps.event.addDomListener window, "load", initializeMap
HTML
The map will be created inside the div #map
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
...
LESS
Remember to set the height of the div that contains the map. And if you want to change some styles for the pop up you can do it adding styles to the gm-style-iw
class
#map{
height:200px;
// PopUp (info window)
.gm-style-iw{
text-align:center;
}
}