Category Archives: Google Map

Google Place API

Get an API key
Get library
Get library
Get library

Library: https://developers.google.com/maps/documentation/javascript/places

Example: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

Place types of autocomplete service:
https://developers.google.com/places/supported_types#table3

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Your Key]&libraries=places"></script>

1	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[Your Key]&libraries=places"></script>

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'short_name',
  postal_code: 'short_name'
};

$(document).ready(function(){
	initAutocomplete();
});

function initAutocomplete() {
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
      {types: ['geocode']});

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
	// Get the place details from the autocomplete object.
	var p = autocomplete.getPlace();
	console.log(p);

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	var $c = $('.place-box');
	var cps = p.address_components;

	$c.find('[name="name"]').val(p.name);
	$c.find('[name="gmap_id"]').val(p.place_id);
	$c.find('[name="photo"]').val(get_photo(p));
	$c.find('[name="address"]').val(p.formatted_address);
	$c.find('[name="city"]').val(find_add_part(cps, 'administrative_area_level_1', 'long'));
	$c.find('[name="country"]').val(find_add_part(cps, 'country', 'short'));
	$c.find('[name="latitude"]').val(p.geometry.location.lat);
	$c.find('[name="longitude"]').val(p.geometry.location.lng);
	$c.find('[name="phone"]').val(p.international_phone_number);
	$c.find('[name="url"]').val(p.url);
}

function find_add_part(components, targetType, name_type){
	if(name_type == 'long'){
		var name_type = 'long_name';
	}else{
		var name_type = 'short_name';
	}

	for (var i = 0; i < components.length; i++) {
		var cp = components[i];
	    var types = cp.types;

	    for (var j = 0; j < types.length; j++) {
	    	var addType = types[j];
		    if (targetType == addType) {
		      var val = cp[name_type];
		      //document.getElementById(addressType).value = val;
		      return val;
		    }
		}
	}

	return '';
}

function get_photo(p){
	if(p.photos == null || p.photos.length == 0){
		return '';
	}
	
	var photo = p.photos[0];
	return photo.getUrl({'maxWidth': 500});
}

function get_place_detail(p){
	var params = {
		'placeid': p.place_id, 
		'key': 'key'
	}

	$.get(base_url + 'assets/place_detail.json', params, function(data){
		//console.log(data);
		var p = data.result;

		var $c = $('.place-box');

		$c.find('[name="name"]').val(p.name);
		$c.find('[name="gmap_id"]').val(p.place_id);
		$c.find('[name="photo"]').val(p.icon);
		$c.find('[name="address"]').val(p.formatted_address);
		$c.find('[name="city"]').val(p.address_components[2].long_name);
		$c.find('[name="country"]').val(p.address_components[4].short_name);
		$c.find('[name="latitude"]').val(p.geometry.location.lat);
		$c.find('[name="longitude"]').val(p.geometry.location.lng);
		$c.find('[name="phone"]').val(p.international_phone_number);
		$c.find('[name="url"]').val(p.url);
	});
}

function clear_fields(){
	var $c = $('.place-box');

	$c.find('[name="name"]').val('');
	$c.find('[name="gmap_id"]').val('');
	$c.find('[name="photo"]').val('');
	$c.find('[name="address"]').val('');
	$c.find('[name="city"]').val('');
	$c.find('[name="country"]').val('');
	$c.find('[name="latitude"]').val('');
	$c.find('[name="longitude"]').val('');
	$c.find('[name="phone"]').val('');
	$c.find('[name="url"]').val('');
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

var placeSearch, autocomplete;

var componentForm = {

street_number: 'short_name',

route: 'long_name',

locality: 'long_name',

administrative_area_level_1: 'short_name',

country: 'short_name',

postal_code: 'short_name'

};

$(document).ready(function(){

initAutocomplete();

});

function initAutocomplete() {

// Create the autocomplete object, restricting the search to geographical

// location types.

autocomplete = new google.maps.places.Autocomplete(

/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),

{types: ['geocode']});

// When the user selects an address from the dropdown, populate the address

// fields in the form.

autocomplete.addListener('place_changed', fillInAddress);

}

function fillInAddress() {

// Get the place details from the autocomplete object.

var p = autocomplete.getPlace();

console.log(p);

// Get each component of the address from the place details

// and fill the corresponding field on the form.

var $c = $('.place-box');

var cps = p.address_components;

$c.find('[name="name"]').val(p.name);

$c.find('[name="gmap_id"]').val(p.place_id);

$c.find('[name="photo"]').val(get_photo(p));

$c.find('[name="address"]').val(p.formatted_address);

$c.find('[name="city"]').val(find_add_part(cps, 'administrative_area_level_1', 'long'));

$c.find('[name="country"]').val(find_add_part(cps, 'country', 'short'));

$c.find('[name="latitude"]').val(p.geometry.location.lat);

$c.find('[name="longitude"]').val(p.geometry.location.lng);

$c.find('[name="phone"]').val(p.international_phone_number);

$c.find('[name="url"]').val(p.url);

}

function find_add_part(components, targetType, name_type){

if(name_type == 'long'){

var name_type = 'long_name';

}else{

var name_type = 'short_name';

}

for (var i = 0; i < components.length; i++) {

var cp = components[i];

var types = cp.types;

for (var j = 0; j < types.length; j++) {

var addType = types[j];

if (targetType == addType) {

var val = cp[name_type];

//document.getElementById(addressType).value = val;

return val;

}

return '';

}

function get_photo(p){

if(p.photos == null || p.photos.length == 0){

return '';

}

var photo = p.photos[0];

return photo.getUrl({'maxWidth': 500});

}

function get_place_detail(p){

var params = {

'placeid': p.place_id,

'key': 'key'

}

$.get(base_url + 'assets/place_detail.json', params, function(data){

//console.log(data);

var p = data.result;

var $c = $('.place-box');

$c.find('[name="name"]').val(p.name);

$c.find('[name="gmap_id"]').val(p.place_id);

$c.find('[name="photo"]').val(p.icon);

$c.find('[name="address"]').val(p.formatted_address);

$c.find('[name="city"]').val(p.address_components[2].long_name);

$c.find('[name="country"]').val(p.address_components[4].short_name);

$c.find('[name="latitude"]').val(p.geometry.location.lat);

$c.find('[name="longitude"]').val(p.geometry.location.lng);

$c.find('[name="phone"]').val(p.international_phone_number);

$c.find('[name="url"]').val(p.url);

});

}

function clear_fields(){

var $c = $('.place-box');

$c.find('[name="name"]').val('');

$c.find('[name="gmap_id"]').val('');

$c.find('[name="photo"]').val('');

$c.find('[name="address"]').val('');

$c.find('[name="city"]').val('');

$c.find('[name="country"]').val('');

$c.find('[name="latitude"]').val('');

$c.find('[name="longitude"]').val('');

$c.find('[name="phone"]').val('');

$c.find('[name="url"]').val('');

}

tinyMap to handle Google Map

http://app.essoduke.org/tinyMap/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.tinyMap.min.js"></script>

<div id="gmap" style="width: 100%; height: 440px"></div>

Javascript

function init_map(){
	map = $('#gmap');
	map.tinyMap({
		zoom: 3,
		scrollwheel: false,
	    marker: [
	        {addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'},
	        {addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'},
	        {addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'},
	        {addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'},
	        {addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'},
	        {addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'},
	        {addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'},
	        {addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'},
			{addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'}
		]
	});


	$('#gmapcontrols button').on('click', function(e){
		var obj = $(this),
	        id = obj.text(),
	        m = {},
	        marker = {},
	        markers = [],
	        i = 0;
	    // 取得 tinyMap 實例
	    m = map.data('tinyMap');
	    // 取得所有標記
	    markers = m._markers;
	    close_all_markers();

	    for (i = 0; i < markers.length; i += 1) {
	        marker = markers[i];
	        // 若標記 id 符合則開啟 infoWindow
	        if (id === marker.id) {
	            marker.infoWindow.open(m.map, marker);
	            // 移動地圖
	            m.map.panTo(marker.position);
	            map.tinyMap('modify', {zoom:15})
	            break;
	        }
	    }
	});
}

function close_all_markers(){
	// 取得 tinyMap 實例
    m = map.data('tinyMap');
    // 取得所有標記
    markers = m._markers;

    for (i = 0; i < markers.length; i++) {
        marker = markers[i];
        // 關閉所有 infoWindow
        marker.infoWindow.close();
    }
}

function init_map(){

map = $('#gmap');

map.tinyMap({

zoom: 3,

scrollwheel: false,

marker: [

{addr: ['33.882648', '130.879787'], text: 'Kyomachi Shop', 'id': 'Kyomachi Shop'},

{addr: ['33.885827', '130.880040'], text: 'Uomachi Shop', 'id': 'Uomachi Shop'},

{addr: ['33.885411', '130.882519'], text: 'COLET Shop', 'id': 'COLET Shop'},

{addr: ['25.042333', '121.544913'], text: 'Taipei SOGO Branch', 'id': 'Taipei SOGO Branch'},

{addr: ['25.040868', '121.565605'], text: 'Taipei HanKyu Branch', 'id': 'Taipei HanKyu Branch'},

{addr: ['1.274893', '103.843510'], text: '100AM Shop', 'id': '100AM Shop'},

{addr: ['1.301506', '103.838549'], text: '313somerset Shop', 'id': '313somerset Shop'},

{addr: ['31.205884', '121.467854'], text: 'SunMoonLightCenter', 'id': 'SunMoonLightCenter'},

{addr: ['31.233118', '121.411928'], text: 'GLOBAL HARBOR', 'id': 'GLOBAL HARBOR'}

]

});

$('#gmapcontrols button').on('click', function(e){

var obj = $(this),

id = obj.text(),

m = {},

marker = {},

markers = [],

i = 0;

// 取得 tinyMap 實例

m = map.data('tinyMap');

// 取得所有標記

markers = m._markers;

close_all_markers();

for (i = 0; i < markers.length; i += 1) {

marker = markers[i];

// 若標記 id 符合則開啟 infoWindow

if (id === marker.id) {

marker.infoWindow.open(m.map, marker);

// 移動地圖

m.map.panTo(marker.position);

map.tinyMap('modify', {zoom:15})

break;

}

});

}

function close_all_markers(){

// 取得 tinyMap 實例

m = map.data('tinyMap');

// 取得所有標記

markers = m._markers;

for (i = 0; i < markers.length; i++) {

marker = markers[i];

// 關閉所有 infoWindow

marker.infoWindow.close();

}

Google Map Event Closure Problem

google.maps.event.addListener(marker, &#39;click&#39;, function(innerMarker, innerItem) {
      return function() {
          //infowindows[innerKey].open(map, markers[innerKey]);
          //Info window of this marker
          var infowindow = new google.maps.InfoWindow({
            content: &#39;&lt;div class=&quot;info_wrapper&quot;&gt;&lt;img src=&quot;&#39; + get_icon(innerItem.appicon) + &#39;&quot; class=&quot;app_icon&quot;/&gt;&#39; + 
              &#39;&lt;span class=&quot;info_title&quot;&gt;&lt;strong&gt;&#39; + innerItem.title + &#39;&lt;/strong&gt;&lt;/span&gt;&#39; + 
              &#39;&lt;span class=&quot;info_desc&quot;&gt;&#39; + innerItem.description + &#39;&lt;/span&gt;&#39; + 
              &#39;&lt;/div&gt;&#39;, 
            maxWidth: 200
          });

          infowindow.open(map,innerMarker);
      }
    }(marker, item));

google.maps.event.addListener(marker, 'click', function(innerMarker, innerItem) {

return function() {

//infowindows[innerKey].open(map, markers[innerKey]);

//Info window of this marker

var infowindow = new google.maps.InfoWindow({

content: '<div class="info_wrapper"><img src="' + get_icon(innerItem.appicon) + '" class="app_icon"/>' +

'<span class="info_title"><strong>' + innerItem.title + '</strong></span>' +

'<span class="info_desc">' + innerItem.description + '</span>' +

'</div>',

maxWidth: 200

});

infowindow.open(map,innerMarker);

}

}(marker, item));

Reference:

http://stackoverflow.com/questions/7044587/adding-multiple-markers-with-infowindows-google-maps-api

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: Google Map

Google Place API

tinyMap to handle Google Map

Google Map Event Closure Problem