平成30/ 2018-12-19 17:42
GOOGLE MAP/ javascript 吹き出し
住所から緯度経度を取得し地図を表示する
吹き出し

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
    var lat, lng;

    var myLatlng = new google.maps.LatLng(35.6553528, 139.6953766);

    myOptions = {
        zoom: 16,
        center: myLatlng,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"<?php echo h($dt["host_name"]); ?>"
    });

    var sad = '<?php echo h(preg_replace("/'/u", "’", $dt["addr"])); ?>';
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': sad}, function(results, status) {


    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        marker.setPosition(results[0].geometry.location);
        var p = marker.position;
        lat = p.lat();
        lng = p.lng();

        myLatlng = new google.maps.LatLng(lat, lng);
        myOptions = {
            zoom: 16,
            center: myLatlng,
            scrollwheel: false,
             mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"<?php echo h($dt["host_name"]); ?>"
        });

        var infowindow = new google.maps.InfoWindow(
        { content: '<img src="/images/logo_s.gif" alt="オルトです" /><div style="margin-top:10px; font-size:12px;"><b><?php
echo h($dt["place"]); ?></b></div>',
        size: new google.maps.Size(500,30)
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
         google.maps.event.trigger(marker, 'click');
    } else {
        //alert('住所から場所を特定できませんでした。最初にビル名などを省略し、番地までの検索などでお試しください。
');
    }
    });
</script>


(Thanks.)
Google Maps APIを使ったサンプルです。
http://www.ajaxtower.jp/googlemaps/ginfowindow/map3_2.html

情報ウィンドウに表示するコンテンツの設定
http://www.ajaxtower.jp/googlemaps/ginfowindow/index3.html

Google Mapsのマーカーに吹き出し(InfoWindow)を表示する
http://jsajax.com/Articles/ajaxgooglemapv3infowindow/1586

http://webcache.googleusercontent.com/search?q=cache:hBkDAvUkMJAJ:hampom.wordpress.com/2010/03/03/google-maps-apiv3-%E3%81%A7%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%81%AB%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%82%92%E7%BD%AE%E3%81%8F%EF%BC%81/+google.maps.Geocoder&cd=6&hl=ja&ct=clnk&gl=jp