The important thing is to emphasize that you must use IE browser to open
1<apex:page >23<meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/>4<script type= "Text/javascript" src= "Http://maps.google.cn/maps/api/js?sensor=false" ></script>5<script type= "Text/javascript" >6 //Add custom content to the marker tag7 functionmyload () {8 9 varLat = 23.14746;Ten varLNG = 113.34175376; One A varMYLATLNG =Newgoogle.maps.LatLng (lat, LNG); - varMyoptions = { -Zoom:15, the CENTER:MYLATLNG, - MapTypeId:google.maps.MapTypeId.ROADMAP - }; - varMap =NewGoogle.maps.Map (document.getElementById ("Map"), myoptions); + - //Create marker + varMarker =NewGoogle.maps.Marker ({ A POSITION:MYLATLNG, atDraggable:true - }); - marker.setmap (map); - - //Create Infowindow Custom content - varInfowindow =NewGoogle.maps.InfoWindow ({ in //Customizing Content - //in this case, longitude and latitude are fixed, so they don't change as the icons change. toContent: "Longitude:" + marker.position.lat () + "+" Latitude: "+marker.position.lng () + }); - infowindow.open (map, marker); the * } $Window.onload =Myload;Panax Notoginseng</script> - the<body> +<style> A #map { the width:500px; + height:400px; - float: Left; $ } $</style> -<div id= "Map" ></div> -</body> the</apex:page>
This column does not have a format of marker, and the default icon is called. Because it was about Infowindow.
When introducing marker, there is a very important attribute to forget to say.
Create Marker21 var marker = new position:mylatlng,23 });
Whether you can drag. This property is important because it is used below.
Create Infowindow Custom Content -var Infowindow = new Google.maps.InfoWindow ({$/ /custom content // In this case, the latitude and longitude are fixed, so they don't change with the icon. content: "Longitude:" + marker.position.lat () + "+" Latitude: "+ Infowindow.open (map, marker);
This is the simplest step in creating a infowindow.Content is what you want to show inside the Infowindow, and the content in this example does not follow
Infowindow and marker are moving and changing, not because
Marker.position.lat ();
MARKER.POSITION.LNG ();
These two methods are not good to use, but the two methods at the beginning of the execution of the first time, then no longer be called to execute, so the content is fixed;
Write the next one that can be changed.
First knowledge SFDC create a Google Map (add small box Infowindow on marker small icon)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
