html 使用标记处理Google地图/自定义WP地图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用标记处理Google地图/自定义WP地图相关的知识，希望对你有一定的参考价值。
REFs:
http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null
http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
THE HTML THAT WILL DISPLAY THE MAP, ( HEIGHT MUST BE A FIXED VALUE, CAN'T BE MAX-HEIGHT )
<div id="map" style="max-width: 1110px; height: 550px;"></div>
// JS + PHP at the bottom of the page:
<?php
// dont specify taxonomy slug name, we want to get all addresses via the custom field 'map'
$args = array ( 'taxonomy' => 'tr_portfolio_taxonomy',
'post_type' => 'tr_portfolio'
);
$coords = array(); // store all map addresses in this array
$coords_first = array() ;
$map_coordinates = new WP_Query($args);
$maps_counter = 0;
?>
<script>
var locations = [
<?php
if ( have_posts() ) : while ( $map_coordinates->have_posts() ) : $map_coordinates->the_post();
$coords[] = get_field('address') ; // one full address
$address_first = $coords[0] ; // get first coordinate, this is to be used as default location on page load
$address = $coords[$maps_counter] ; // map_counter increments to the next index in each loop
$prop_title = get_field('property_title') ;
$property_title = '"' . $prop_title ;
$prop_address = get_field('address') ;
$property_address = $prop_address . '"' ;
$prepAddr_first = str_replace(' ','+',$address_first); // format for first coordinates
$prepAddr = str_replace(' ','+',$address); // format for google maps URL
$geocode_first=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr_first.'&sensor=false');
$geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
$output_first= json_decode($geocode_first);
$output= json_decode($geocode);
$latitude_first = $output->results[0]->geometry->location->lat;
$longitude_first = $output->results[0]->geometry->location->lng;
$latitude = $output->results[0]->geometry->location->lat;
$longitude = $output->results[0]->geometry->location->lng;
echo '[' . $property_title . ' - ' . $property_address . ',' . $latitude . ',' . $longitude . '], ' ; // print property_title and property_address
$maps_counter++; // increment array index by 1 on each loop
endwhile; endif; wp_reset_postdata();
?>
];
<?php
?>
var map = new google.maps.Map(document.getElementById('map'), {
// Let the user pick a zoom value
zoom: <?php the_field('map_zoom') ?>,
scrollwheel: false,
center: new google.maps.LatLng(<?php echo $latitude_first ?>, <?php echo $longitude_first ?>),
//center: new google.maps.LatLng(25.6841274, -80.314415),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>以上是关于html 使用标记处理Google地图/自定义WP地图的主要内容，如果未能解决你的问题，请参考以下文章
Android Google Map API 自定义标记在自定义标记上带来谷歌地图数据
iOS Google 地图 SDK - 可以将当前位置蓝点标记为红点