How to combine geolocation and multiple markers using javascript?

Question

I am trying to create a map that can track my location and at the same time be able to display multiple markers. Can I combine the two JavaScripts below? If not for the idea of ​​how I should do this?

JavaScript for multiple markers

<script type="text/javascript"> var locations = [ ['Hougang', 1.37265, 103.893658], ['Punggol', 1.400617, 103.907833], ['MacRitchie Reservoir', 1.346002, 103.825436], ['Bishan', 1.352051, 103.849125], ['Sentosa', 1.251226, 103.830757] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: new google.maps.LatLng(1.37265, 103.893658), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } 

JavaScript for current location

 navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; } 

Answer 1

Yes, they can be combined. When you initialize the map and after building the Hougang plot ... you can add the geolocation code. I wrote a demo that will show a smaller green icon for geolocation. If the browser does not support geocoding, nothing will appear, errors will not be displayed.

DEMO http://jsfiddle.net/yV6xv/7/

Remember that geolocation does not work (at least for me) if the code is downloaded locally from the hard drive. It must be publicly available.

 // Check if user support geo-location if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var geolocpoint = new google.maps.LatLng(latitude, longitude); var mapOptions = { zoom: 8, center: geolocpoint, mapTypeId: google.maps.MapTypeId.HYBRID } // Place a marker var geolocation = new google.maps.Marker({ position: geolocpoint, map: map, title: 'Your geolocation', icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png' }); }); } 

Answer 2

Below is a working example and its use in my project

 function AddInfoWidnow(marker,message) { var infowindow = new google.maps.InfoWindow({ content: message }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(marker.get('map'), marker); }); } function ShowOnMap(ContainerId, mapItems) { var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824'); var mapOptions = { center: DefaultLatLng, zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, marker: true }; var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions); var arrJsonObject = JSON.parse(mapItems); for (var y = 1; y <= arrJsonObject.length; y++) { var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude); var marker = new google.maps.Marker({ position: myLatLng1, map: mapCust, title: 'Marked at '+ arrJsonObject[y - 1].markedDate }); addInfoWindows(marker,y-1,arrJsonObject); marker.setMap(mapCust); } } 

use the following json line to call.

  var mapItems='[ { "Latitude": "22.575897", "Lonngitude": "88.431754", "CustomerCode": "*$$$*", "CustomerName": "*@@@*", "markedDate": "2/20/2014 12:04:41 PM" }, { "Latitude": "22.615067", "Lonngitude": "88.431759", "CustomerCode": "*$$$*", "CustomerName": "*@@@*", "markedDate": "2/20/2014 3:02:19 PM" } ]'; ShowOnMap(containerId2, mapItems);