Skip to content

Instantly share code, notes, and snippets.

@mateusneves
Created December 7, 2016 12:34
Show Gist options
  • Save mateusneves/6e997dac5a94ff587c3965b50bcd70cb to your computer and use it in GitHub Desktop.
Save mateusneves/6e997dac5a94ff587c3965b50bcd70cb to your computer and use it in GitHub Desktop.
Show Map by Address with Google Maps API, and change custom marker
/*=======================================
= Google Maps API =
=======================================*/
var geocoder;
var map;
var address = location_address;
function initialize() {
geocoder = new google.maps.Geocoder();
//var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 16,
//center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("qwp_map_canvas"), myOptions);
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
// Recuperando a latitude e longitude do endereço definido
//var latitude = results[0].geometry.location.lat();
//var longitude = results[0].geometry.location.lng();
var infowindow = new google.maps.InfoWindow({
content: '<b>' + address + '</b>',
size: new google.maps.Size(150, 50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address,
icon: template_uri + "/assets/img/map-marker.png",
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
/*===== End of Google Maps API ======*/
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&#038;ver=4.6.1'></script>
<div id="qwp_map_canvas"></div>
#qwp_map_canvas{
width: 100%;
height: 400px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment