Html google map 画像表示
index.html
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <! 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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <! 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
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!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> |