Created
July 27, 2017 10:40
-
-
Save Teckchun/a3721be38dfc2a6c442a52ccf24aceec to your computer and use it in GitHub Desktop.
Google map marker with Ajax request sample
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| /* IMPORTANT - must give map div height */ | |
| #map-canvas { | |
| height:400px; | |
| } | |
| /* IMPORTANT - fixes webkit infoWindow rendering */ | |
| #map-canvas img { | |
| max-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="row"> | |
| <div class="span12"> | |
| <h1>google map</h1> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="span6"> | |
| <div id="map-canvas"></div> | |
| <br> | |
| </div> | |
| </div> | |
| <!-- START OF THE GOOD STUFF --> | |
| <!-- Load the Google Maps JS API. Your Google maps key will be rendered. --> | |
| <script | |
| src="https://code.jquery.com/jquery-3.2.1.js" | |
| integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" | |
| crossorigin="anonymous"></script> | |
| <script type="text/javascript" | |
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGpt0Pu9_PeT6soWygFil7Tt4mdEW6Soo"> | |
| </script> | |
| <script type="text/javascript"> | |
| var geocoder; | |
| var map; | |
| var places; | |
| var markers = []; | |
| function initialize() { | |
| var myLatLng = {lat: 11.569003, lng: 104.890680}; | |
| // set some default map details, initial center point, zoom and style | |
| var mapOptions = { | |
| center: myLatLng, | |
| zoom: 15, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }; | |
| // create the map and reference the div#map-canvas container | |
| map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); | |
| // fetch the existing places (ajax) | |
| // and put them on the map | |
| fetchPlaces(); | |
| } | |
| // when page is ready, initialize the map! | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| // add location button event | |
| // fetch Places JSON from JSON FILES | |
| // loop through and populate the map with markers | |
| var fetchPlaces = function() { | |
| var infowindow = new google.maps.InfoWindow({ | |
| content: '' | |
| }); | |
| // AJAX REQUEST | |
| jQuery.ajax({ | |
| url : 'places.json', | |
| dataType : 'json', | |
| success : function(response) { | |
| console.log("university=>", response.universities) | |
| places = response.universities; | |
| //console.log(places.universities[0]) | |
| // loop through places and add markers | |
| for (p in places) { | |
| console.log(places[p].lat) | |
| console.log(places[p].lng) | |
| //create gmap latlng obj | |
| tmpLatLng = new google.maps.LatLng( places[p].lat, places[p].lng); | |
| // make and place map maker. | |
| var marker = new google.maps.Marker({ | |
| map: map, | |
| position: tmpLatLng, | |
| title : places[p].title + "<br>" + places[p].phone | |
| }); | |
| bindInfoWindow(marker, map, infowindow, '<b>'+places[p].title + "</b><br>" + places[p].phone); | |
| // not currently used but good to keep track of markers | |
| markers.push(marker); | |
| } | |
| } | |
| }) | |
| }; | |
| // binds a map marker and infoWindow together on click | |
| var bindInfoWindow = function(marker, map, infowindow, html) { | |
| google.maps.event.addListener(marker, 'click', function() { | |
| infowindow.setContent(html); | |
| infowindow.open(map, marker); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| { | |
| "universities" : [ | |
| { | |
| "title": "RUPP", | |
| "web": "www.aber.ac.uk", | |
| "phone": "+44 (0)1970 623 111", | |
| "lat": 11.569003, | |
| "lng": 104.890680 | |
| }, | |
| { | |
| "title": "KSHRD", | |
| "web": "www.bangor.ac.uk", | |
| "phone": "+44 (0)1248 351 151", | |
| "lat": 11.575760, | |
| "lng": 104.889119 | |
| }, | |
| { | |
| "title": "PUC", | |
| "website": "www.cardiffmet.ac.uk", | |
| "phone": "+44 (0)2920 416 138", | |
| "lat": 11.573069, | |
| "lng": 104.890316 | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment