用戶註冊時在谷歌地圖中添加標記

Question

我想要做到這一點，當用戶在我的門戶網站註冊時，他們可以添加標記到地圖（谷歌地圖）。任何人都可以幫助我，我該怎麼做？

---

編輯：

代碼，我使用：

<script> 
function initialize() { 

     /* Style of the map */ 
     var styles = [ 
     { 
      stylers: [ 
      { hue: "#00ffe6" }, 
      { saturation: -20 } 
      ] 
     },{ 
      featureType: "road", 
      elementType: "geometry", 
      stylers: [ 
      { lightness: 100 }, 
      { visibility: "simplified" } 
      ] 
     },{ 
      featureType: "road", 
      elementType: "labels", 
      stylers: [ 
      { visibility: "off" } 
      ] 
     },{ 
      featureType: "poi", 
      elementType: "labels", 
      stylers: [ 
       { visibility: "off" } 
      ] 
      } 

     ]; 


     // Create a new StyledMapType object, passing it the array of styles, 
     // as well as the name to be displayed on the map type control. 
     var styledMap = new google.maps.StyledMapType(styles, {name: "Semini"}); 

     /* Lat. and Lon. of the center of the map */ 

     var myCenter = new google.maps.LatLng(45.8330653, 9.8506751,11); 

     // Create a map object, and include the MapTypeId to add 
     // to the map type control. 
     var mq = window.matchMedia("(max-width: 720px)"); 

    if (mq.matches){ 
var mapOptions = { 
     zoom: 9,    //zoom level 
     center: myCenter,  //center position 
     scrollwheel: false,  //zoom when scroll disable 
     zoomControl: true,  //show control zoom 

     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 

     }; 

    } else { 
var mapOptions = { 
     zoom: 10,    //zoom level 
     center: myCenter,  //center position 
     scrollwheel: false,  //zoom when scroll disable 
     zoomControl: true,  //show control zoom 

     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 

     }; 
}; 

var map = new google.maps.Map(document.getElementById('map-     canvas'),mapOptions); 

     //Associate the Semini with the MapTypeId and set it to display. 
     map.mapTypes.set('map_style', styledMap); 
     map.setMapTypeId('map_style'); 


    /* Marker example for stack */ 
     var contentString3 = 
      '<div class="popup">'+ 
      '<h2 id="example">City</h2>'+ 
         '<a href="/main.php?page=city">'+ 
      'VISIT</a> '+ 
      '</div>'; 

     var infowindow3 = new google.maps.InfoWindow({ 
      content: contentString3, 
      maxWidth: 230, 
      maxHeight: 300, 

     }); 

     var image1 = 'mappa/food.png'; 
     var myLatLng3 = new google.maps.LatLng(45.87901, 10.17745); 
     var marker3 = new google.maps.Marker({ 
      position: myLatLng3, 
      map: map, 
      icon: image1 
     }); 

     google.maps.event.addListener(marker3, 'click', function() { 
     infowindow3.open(map,marker3); 
     }); 




     /* open popup marker when map is load */ 
     new google.maps.event.trigger(marker, 'click');   

    } 

google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

該腳本

我添加靜態標記好嗎？但是如何註冊時添加標記的門戶用戶呢？所以lat和長標記通過XXX

這樣的： https://www.sofasurfer.org/blog/2011/06/27/dynamic-google-map-markers-via-simple-json-file/

Answer 1

爲了在GMAP使用的標誌，你應該先把位置座標，你想要把marker.Make確保地圖是全球性的，以便您稍後可以參考它來動態添加另一個標記。

下面給出了在地圖中使用標記的簡單示例。

//specify your Html element Id value here where you want to show the map 
var mapPosition=document.getElementById('myMap'); 

//Make sure map is global so that another marker can be added to the map later 
map = new google.maps.Map(mapPosition, { 
     zoom: 4, 
     center: myPosition 
    }); 

// specify your coordinates 
var myPosition={lat: -25.363, lng: 131.044}; 

var markerOptions={position: myPosition, map: map, title: 'some text'}; 

// putting a marker in the specified position in the map 
var marker = new google.maps.Marker(markerOptions); 

如果你想添加另一個標記動態說按鈕click.You可以這樣做。

//assuming this function gets called on some button click 
function onButtonClick() 
{ 
    //create your maker here 
    var anotherPosition={lat: -29.363, lng: 150.044}; 
    var newMarkerOptions={position: anotherPosition, map: map, title: 'some text'}; 
    var newMarker = new google.maps.Marker(newMarkerOptions); 
}