グーグルマップの助けを求めるために登録しました。私は自分のサイトのグーグルマップに家のさまざまな広告を挿入できるようにするプロジェクトに取り組んでいます。その位置が決して正しくない理由はわかりません。最初は以下のコードを使用してみました...
次に、変数city、street、state、およびzipcodeを削除して、なぜそれらが戦争に出たのかを削除する必要がありました。しかし、何も解決せずに。したがって、状況をよりよく理解するためにリンクにアクセスしてください。生成されたコードは、マップdivの上部にあるscriptタグにあります。
<script>var defaultmapcenter = {mapcenter: "<?php echo $ct_options['ct_home_map_center']; ?>"}; google.maps.event.addDomListener(window, 'load', function(){ estateMapping.init_property_map(property_list, defaultmapcenter); });</script>
<script>
var property_list = [];
var default_mapcenter = [];
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?>
var property = {
thumb: "<?php ct_first_image_tn_map() ?>",
price: "<?php currency(); ?><?php map_pin_price(); ?>",
fullPrice: "<?php currency(); ?><?php listing_price(); ?>",
bed: "<?php beds(); ?>",
bath: "<?php baths(); ?>",
size: "<?php echo get_post_meta($post->ID, "_ct_sqft", true); ?> <?php sqftsqm(); ?>",
street: "<?php the_title(); ?>",
city: "<?php city(); ?>",
state: "<?php state(); ?>",
zip: "<?php zipcode(); ?>",
latlong: "<?php echo get_post_meta(get_the_ID(), "_ct_latlng", true); ?>",
permalink: "<?php the_permalink(); ?>",
agentThumb: "<?php echo get_template_directory_uri(); ?>/img_resize/timthumb.php?src=<?php the_author_meta('ct_profile_url'); ?>&w=40&zc=1'",
agentName: "<?php the_author_meta('first_name'); ?> <?php the_author_meta('last_name'); ?>",
agentTagline: "<?php if(get_the_author_meta('tagline')) { the_author_meta('tagline'); } ?>",
agentPhone: "<?php if(get_the_author_meta('office')) { the_author_meta('office'); } ?>",
agentEmail: "<?php if(get_the_author_meta('email')) { the_author_meta('email'); } ?>",
isHome: "<?php if(is_home()) { echo "false"; } else { echo "true"; } ?>",
commercial: "<?php if(has_type('commercial')) { echo 'commercial'; } ?>"
}
property_list.push(property);
<?php
endwhile; endif;
wp_reset_query();
?>
</script>
<script>var defaultmapcenter = {mapcenter: "<?php echo $ct_options['ct_map_center']; ?>"}; google.maps.event.addDomListener(window, 'load', function(){ estateMapping.init_property_map(property_list, defaultmapcenter); });</script>
**Javascript:**
---------------
var estateMapping = (function () {
var self = {},
marker_list = [],
open_info_window = null,
x_center_offset = 0, // x,y offset in px when map gets built with marker bounds
y_center_offset = -100,
x_info_offset = 0, // x,y offset in px when map pans to marker -- to accomodate infoBubble
y_info_offset = -100;
function build_marker(latlng, property) {
var marker = new MarkerWithLabel({
map: self.map,
draggable: false,
flat: true,
labelContent: property.price,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "label", // the CSS class for the label
labelStyle: {opacity: 1},
icon: 'wp-content/themes/reale/images/blank.png',
position: latlng
});
self.bounds.extend(latlng);
self.map.fitBounds(self.bounds);
self.map.setCenter(convert_offset(self.bounds.getCenter(), x_center_offset, y_center_offset));
var infoBubble = new InfoBubble({
maxWidth: 275,
content: contentString,
borderRadius: 4,
disableAutoPan: true
});
var residentialString = '';
if(property['commercial'] != 'commercial') {
var residentialString='<p class="details">'+property.bed+' '+property.bath+'';
}
var contentString =
'<div class="info-content">'+
'<a href="'+property.permalink+'"><img class="left" src="'+property.thumb+'" /></a>'+
'<div class="listing-details left">'+
'<h3><a href="'+property.permalink+'">'+property.street+'</a></h3>'+
'<p class="location">'+property.city+', '+property.state+' '+property.zip+'</p>'+
'<p class="price"><strong>'+property.fullPrice+'</strong></p>'+residentialString+', '+property.size+'</p></div>'+
'</div>';
var tabContent =
'<div class="info-content">'+
'<img class="left" src="'+property.agentThumb+'" />'+
'<div class="listing-details left">'+
'<h3>'+property.agentName+'</h3>'+
'<p class="tagline">'+property.agentTagline+'</p>'+
'<p class="phone"><strong>Tel:</strong> '+property.agentPhone+'</p>'+
'<p class="email"><a href="mailto:'+property.agentEmail+'">'+property.agentEmail+'</a></p>'+
'</div>'+
'</div>';
infoBubble.addTab('Details', contentString);
infoBubble.addTab('Contact Agent', tabContent);
google.maps.event.addListener(marker, 'click', function() {
if(open_info_window) open_info_window.close();
if (!infoBubble.isOpen()) {
infoBubble.open(self.map, marker);
self.map.panTo(convert_offset(this.position, x_info_offset, y_info_offset));
open_info_window = infoBubble;
}
});
}
function geocode_and_place_marker(property) {
var geocoder = new google.maps.Geocoder();
var address = property.street+', '+property.city+' '+property.state+', '+property.zip;
//If latlong exists build the marker, otherwise geocode then build the marker
if (property['latlong']) {
var lat = parseFloat(property['latlong'].split(',')[0]),
lng = parseFloat(property['latlong'].split(',')[1]);
var latlng = new google.maps.LatLng(lat,lng);
build_marker(latlng, property);
} else {
geocoder.geocode({ address : address }, function( results, status ) {
if(status == google.maps.GeocoderStatus.OK) {
var latlng = results[0].geometry.location;
build_marker(latlng, property);
}
});
}
}
function init_canvas_projection() {
function CanvasProjectionOverlay() {}
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};
self.canvasProjectionOverlay = new CanvasProjectionOverlay();
self.canvasProjectionOverlay.setMap(self.map);
}
function convert_offset(latlng, x_offset, y_offset) {
var proj = self.canvasProjectionOverlay.getProjection();
var point = proj.fromLatLngToContainerPixel(latlng);
point.x = point.x + x_offset;
point.y = point.y + y_offset;
return proj.fromContainerPixelToLatLng(point);
}
self.init_property_map = function (properties, defaultmapcenter) {
var options = {
zoom: 1,
center: new google.maps.LatLng(defaultmapcenter.mapcenter),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
streetViewControl: false
};
self.map = new google.maps.Map( document.getElementById( 'map' ), options );
self.bounds = new google.maps.LatLngBounds();
init_canvas_projection();
//wait for idle to give time to grab the projection (for calculating offset)
var idle_listener = google.maps.event.addListener(self.map, 'idle', function() {
for (i=0;i<properties.length;i++) {
geocode_and_place_marker(properties[i]);
}
google.maps.event.removeListener(idle_listener);
});
}
return self;
}());
