ユーザー登録時にGoogleマップにマーカーを追加

Question

ユーザーが自分のポータルに登録すると、マーカー（Googleマップ）にマーカーを追加できます。誰でも私を助けることができますどのように私はそれを行うことができますか？

---

編集：私が使用

コード：そのスクリプトで

<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> 

私はOK、静的なマーカーを追加？しかし、どのようにポータルのユーザーは、そのコードのマーカーを追加登録することができますか？その緯度と長い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); 

ボタンをクリックして別のマーカーを動的に追加したい場合は、このようにすることができます。このようにすることができます。

//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); 
}