Googleマップで別の場所を表示

Question

私は1つのアドレスを持っていますが、Googleマップに表示されているときは正しく表示されますが、PHPページのinnside divに表示すると別の名前が表示されます。

  fillAddress(i,srmode,phmid); 
      var addr = $("#curPhmName").html()+", "+$("#mapadd"+i).html(); 
      console.log(addr+"-jignesh"); 
      var mapProp = { 
       center:new google.maps.LatLng(latitude,longitude), 
       zoom:12, 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 
      var map=new google.maps.Map(document.getElementById("regGoogleMap"),mapProp); 
      var marker=new google.maps.Marker({ 
       position:new google.maps.LatLng(latitude,longitude), 
      url: "http://www.google.com/maps/search/"+addr, 
      }); 

      var contentString=$("#marker_address").html(); 
      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 
      google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);}); 
          infowindow.open(map,marker); 
      marker.setMap(map); 

Answer 1

そのデータを取得するためにplaceIdと場所のライブラリを使用します。

service.getDetails({ 
    placeId: "ChIJ5_fxvXQtdEgRJ_xKnVYHZeg" 
    }, function(place, status) { 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
     }); 
     map.setCenter(marker.getPosition()); 
     map.setZoom(21); 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
      'Place ID: ' + place.place_id + '<br>' + 
      place.formatted_address + '</div>'); 
     infowindow.open(map, this); 
     }); 
     google.maps.event.trigger(marker,'click'); 
    } 
    }); 

proof of concept fiddle

コードスニペット：

// This example requires the Places library. Include the libraries=places 
 
// parameter when you first load the API. For example: 
 
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: {lat: -33.866, lng: 151.196}, 
 
    zoom: 15 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var service = new google.maps.places.PlacesService(map); 
 

 
    service.getDetails({ 
 
    placeId: "ChIJ5_fxvXQtdEgRJ_xKnVYHZeg" 
 
    }, function(place, status) { 
 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: place.geometry.location 
 
     }); 
 
     map.setCenter(marker.getPosition()); 
 
     map.setZoom(21); 
 
     google.maps.event.addListener(marker, 'click', function() { 
 
     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
 
      'Place ID: ' + place.place_id + '<br>' + 
 
      place.formatted_address + '</div>'); 
 
     infowindow.open(map, this); 
 
     }); 
 
     google.maps.event.trigger(marker,'click'); 
 
    } 
 
    }); 
 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
 
</script>