-
-
Save RatzeR/1578a0ce855de78e5ce8 to your computer and use it in GitHub Desktop.
Google Map with Marker, InfoWindow & Adress to Lat/Lng Converter
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
<div id="gmap" class="" data-adress="Company, Street, Zip, City" data-lat="5.2135123151" data-lng="10.2131212"></div> | |
<div class="_mapWindow"> | |
<strong>Something</strong> | |
<p> | |
Text Text<br /> | |
FoooBaaaar | |
</p> | |
</div> |
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
getCoords: function() { | |
if($('#gmap').length > 0) { | |
var geocoder = new google.maps.Geocoder(); | |
//Get adress and coordinates | |
var latitude = $('#gmap').data("lat"); | |
var longitude = $('#gmap').data("lng"); | |
var adress = $('#gmap').data("adress"); | |
//When there are coordinates, use them | |
if(latitude != 0 || longitude != 0) { | |
this.buildMap(latitude, longitude); | |
//When you don't have coordinates, build them from an adress | |
} else { | |
geocoder.geocode({ | |
address: adress | |
}, function (locResult) { | |
var latitude = locResult[0].geometry.location.lat(); | |
var longitude = locResult[0].geometry.location.lng(); | |
this.App.Plugins.buildMap(latitude, longitude); | |
}); | |
} | |
} | |
}, | |
buildMap: function(lat, lng){ | |
//Build Map | |
var myLatlng = new google.maps.LatLng(lat, lng); | |
var mapOptions = { | |
zoom: 17, | |
center: myLatlng | |
}; | |
map = new google.maps.Map(document.getElementById('gmap'), mapOptions); | |
//Set Marker | |
var marker = new google.maps.Marker({ | |
position: myLatlng, | |
map: map, | |
title: 'Somewhat', | |
icon: '/path/to/image.png' | |
}); | |
//Info Window | |
var windowContent = $('._mapWindow').html(); | |
var infowindow = new google.maps.InfoWindow({content: windowContent}); | |
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