How to add a multiple marker to a moving location google map,Javascript

Question

I'm trying to make a function that adds a marker based on coordinates given to it,but its seems that the simple thing which adding a single position is not working,other than the current position marker to Google map,since the map is keep updating itself over and over the marker will disappeared that's the code:

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <style> #map-canvas { width: 400px; height: 300px; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition, showError); } } function showPosition(position) { lat = position.coords.latitude; lon = position.coords.longitude; latlon = new google.maps.LatLng(lat, lon) mapholder = document.getElementById('map-canvas') mapholder.style.height = '250px'; mapholder.style.width = '500px'; var myOptions = { center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} } var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } function initialize() { var myLatlng = new google.maps.LatLng(33.8903964,35.497148); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'new location!' }); } </script> </head> <body onload="getLocation()"> <div data-role="page" id="pageone"> <div data-role="header" data-theme="a"> <a href="Welcome.php" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a> <h1>Welcome To My Homepage</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a> </div> <div data-role="main"> <div id="x"></div> <div id="map-canvas"></div><br/> <button onclick="initialize()">hey</button> </div> </body> </html>

Answer 1

So firstly setup the map and marker as global variables:

<script>
var map, marker;
...
</script>

Refactor your initialize function to create them:

function initialize() {
    var myLatlng = new google.maps.LatLng(33.8903964, 35.497148);

    var myOptions = {
        center: myLatlng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    }

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'new location!'
    });
}

Then update your showPosition function to update their coordinates:

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon);

    marker.setPosition(latlon);
    marker.setTitle("You are here!");
    map.setCenter(latlon);
}

Then amend your HTML so it calls initialize on load, and then getLocation in response to the user clicks.

  <body onload="initialize()">
    <div id="map-canvas"></div><br/>     
    <button onclick="getLocation()">hey</button>
  </body>

How to add a multiple marker to a moving location google map,Javascript

Question

1 answers

solution1
0 ACCPTED 2015-06-22 17:06:40

How to add a multiple marker to a moving location google map,Javascript

Question

1 answers

solution1 0 ACCPTED 2015-06-22 17:06:40

solution1
0 ACCPTED 2015-06-22 17:06:40