Html google map 画像表示

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 元ネタ　http://minomon.jp/blog/?p=45　-->
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
    /* ページ読み込み時 */
    // 地図表示
    var lat = $('#schedules li:first-child a').attr('lat');
    var lng = $('#schedules li:first-child a').attr('lng');
    var map_url='http://maps.googleapis.com/maps/api/staticmap?center=' + lat + ',' + lng + '&zoom=14&size=300x300&scale=1&maptype=roadmap&markers=color:red%7C' + lat + ',' + lng + '&sensor=false';
    $('#map_image').attr('src', map_url);

    // 大きな画面のリンク先
    var google_map = 'gmap.php?q=' +  lat + ',' + lng;
    $('#google_map').attr('href', google_map);

    /* リンクをクリック時 */
    // 地図表示
    $('#schedules a').click(function(){
        var lat = $(this).attr('lat');
        var lng = $(this).attr('lng');
        console.log('lat:' + lat + ', lng' + lng );
        var map_url='http://maps.googleapis.com/maps/api/staticmap?center=' + lat + ',' + lng + '&zoom=14&size=300x300&scale=1&maptype=roadmap&markers=color:red%7C' + lat + ',' + lng + '&sensor=false';
        console.log('map_url = ' + map_url);
        $('#map_image').attr('src', map_url);

        // 大きな画面のリンク先
        var google_map = 'gmap.php?q=' +  lat + ',' + lng;
        $('#google_map').attr('href', google_map);
    });
});
</script>

<ul id="schedules">
    <li><a href="javascript:void(0)" lat="34.687216" lng="135.52579">Place1</a></li>
    <li><a href="javascript:void(0)" lat="35.7098621" lng="139.7315025">Place2</a></li>
    <li><a href="javascript:void(0)" lat="35.6041512" lng="140.1629077">Place3</a></li>
</ul>

<img id="map_image" src="" />
<a id="google_map" href="" target="_blank">大きな画面で表示</a>

</body>
</html>

gmap.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body style="margin:0">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
    var myLatLng = new google.maps.LatLng(<?php echo $_GET['q']; ?>);
    var center = new google.maps.LatLng(<?php echo $_GET['q']; ?>);
    var mapOptions = {
        zoom: 14,
        center: center
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style="width:100%; height:300px;"></div>

</body>
</html>

index_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 元ネタ　http://minomon.jp/blog/?p=45　-->
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
    /* ページ読み込み時 */
    // 地図表示
    var lat = $('#schedules li:first-child a').attr('lat');
    var lng = $('#schedules li:first-child a').attr('lng');

    // 大きな画面のリンク先
    var google_map = 'gmap.php?q=' +  lat + ',' + lng;
    $('#google_map').attr('src', google_map);

    /* リンクをクリック時 */
    // 地図表示
    $('#schedules a').click(function(){
        var lat = $(this).attr('lat');
        var lng = $(this).attr('lng');

        // 大きな画面のリンク先
        var google_map = 'gmap.php?q=' +  lat + ',' + lng;
        $('#google_map').attr('src', google_map);
    });
});
</script>
<p>Head</p>
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<ul id="schedules">
    <li><a href="javascript:void(0)" lat="34.687216" lng="135.52579">Place1</a></li>
    <li><a href="javascript:void(0)" lat="35.7098621" lng="139.7315025">Place2</a></li>
    <li><a href="javascript:void(0)" lat="35.6041512" lng="140.1629077">Place3</a></li>
</ul>

<iframe id="google_map" src="" frameborder="0"></iframe>
<style>
#map-canvas{overflow:hidden;}
iframe{
    width: 300px;
    height: 300px;
}
</style>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Foot</p>
</body>
</html>

gmap.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body style="margin:0">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
function initialize() {
    var myLatLng = new google.maps.LatLng(<?php echo $_GET['q']; ?>);
    var center = new google.maps.LatLng(<?php echo $_GET['q']; ?>);
    var mapOptions = {
        zoom: 14,
        center: center
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style="width:300px; height:300px;"></div>
<style>
html{overflow:hidden;}
</style>

</body>
</html>

html, 未分類

PAGE TOP