Last active
December 14, 2015 16:29
-
-
Save richardsweeney/5115534 to your computer and use it in GitHub Desktop.
Google maps JavaScript only API exampte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if ( $( "#map-canvas" ).length ) { // or whatever - only add if the map container exists | |
var address = $(".company-address").text() // get the address from somewhere | |
var geocoder = new google.maps.Geocoder() | |
// geocode the address | |
geocoder.geocode({ 'address': address }, function( results, status ) { | |
if ( status == google.maps.GeocoderStatus.OK ) { | |
var location = results[0].geometry.location | |
// Encode the coordinates | |
var latlng = new google.maps.LatLng( location.ib, location.jb ) | |
var mapOptions = { | |
center : latlng, | |
zoom : 13, | |
mapTypeId : google.maps.MapTypeId.ROADMAP | |
} | |
// Create the map | |
var map = new google.maps.Map( document.getElementById( "map-canvas" ), mapOptions ) | |
// Add the marker | |
var marker = new google.maps.Marker({ | |
position : latlng, | |
map: map | |
}) | |
marker.setMap( map ) | |
// Obviously this can be changed to whatever, but it needs the 2 container divs to work | |
var infowindow = new google.maps.InfoWindow({ | |
content: '<div id="content"><div id="bodyContent"><p><strong>Ibmetall</strong><br>' + address + '</p></div></div>' | |
}) | |
// Add event lister for popup | |
google.maps.event.addListener( marker, 'click', function () { | |
infowindow.open( map, marker ) | |
}) | |
} | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment